如何获取 JSON 数据并在具有 Angular 8 输入类型的组件 HTML 中显示

Question

编辑

嗨，让我解决一下我下面的问题。我已经编辑了下面的所有源代码，首先我有两个 json 文件（一个来自付款，另一个来自销售）但在再次检查 API 后......我可以仅使用一个 JSON 来显示所有数据。

请检查我修改后的 JSON 报告和您的 reff 的所有源代码，我担心当我将“pzrgb2l1lc8w7dp5”（来自支付对象）放入 html.component 时，表格将显示“sale_id”和“status” （来自支付对象）和“firstname”、“lastname”和“email”（来自具有相同“sale_id”的客户对象）。

编辑

如果这个问题已经存在，请先道歉，但现在似乎还没有，因为我已经一个星期来寻找解决问题的方法，但还没有找到答案。

我已设法使用 angular 从 HTTP 服务获取 JSON 数据，我有两个 JSON Url，并希望将其制作成一份报告并成功。但是我想用输入法和按钮来获取JSON报告，没找到教程。

{
  "success": 1,
  "object": "list",
  "total_count": 2,
  "data": [
    {
      "object": "sale",
      "id": "j9cncjq0",
      "status": "Completed",
      "customer": {
        "object": "customer",
        "id": "uj56cbj3943sq1sg",
        "email": "iron.man@email.com",
        "firstname": "Iron",
        "lastname": "Man"
      },
      "payments": {
        "object": "list",
        "total_count": 1,
        "data": [
          {
            "object": "payment",
            "id": "pzrgb2l1lc8w7dp5",
            "sale_id": "j9cncjq0",
            "status": "COMPLETED",
          }
        ]
      }
    },
    {
      "object": "sale",
      "id": "sl8hcw26",
      "status": "Completed",
      "customer": {
        "object": "customer",
        "id": "upwvs7xqbc6zhwxh",
        "email": "black.widows@email.com",
        "firstname": "Black",
        "lastname": "Widows"
      },
      "payments": {
        "object": "list",
        "total_count": 1,
        "data": [
          {
            "object": "payment",
            "id": "pjd79f1yygqrm43q",
            "sale_id": "sl8hcw26",
            "status": "COMPLETED",
          }
        ]
      }
    }
  ]
}

下面是json.service.ts代码

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class JsonService {

  api_key = '1237bb46b22ee';

  private _urlSale: string = 'https://source-website-api/sales?apiKey='+this.api_key;

  constructor(private http: HttpClient) { }

  getSale() {
    return this.http.get(this._urlSale)
  }

}

下面是json.component.ts代码

import { Component, OnInit } from '@angular/core';
import { JsonService } from '../../service/json.service';

@Component({
  selector: 'app-json',
  templateUrl: './json.component.html',
  styleUrls: ['./json.component.css']
})
export class JsonComponent implements OnInit {

  saleJSON: object;

  constructor(private _http: JsonService) { }

  ngOnInit() {
    this._http.getSale().subscribe(data => {
      this.saleJSON = data;
      console.log(this.saleJSON);
    })
  }
}

下面是json.component.html代码

<h1>JSON Receive Data</h1>

<p>Payment Number</p>

<input type="text"> <br><br>
<button type="submit">Check</button>
<p></p>

<table style="width:70%">
    <tr>
      <th>Sale ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
    <tr align="center">
      <td> payment.sale_id </td>
      <td> customer.firstname </td>
      <td> customer.lastname </td>
      <td> customer.email </td>
      <td> payment.status </td>
    </tr>
  </table> 

<p>{{errorMsg}}</p>

希望有人能帮帮我，谢谢。

Answer 1

如果您指的是使按钮单击功能可以访问输入中的值，有几种方法可以做到这一点。一个简单的选择是为输入创建一个变量并绑定到 html 输入元素。然后可以从单击按钮功能访问此值。例如

  export class JsonService {
    inputValue: string
  ...

  check(){
    console.log('running check',this.inputValue)
  }

<input type="text" [(ngModel)]="inputValue"> <br><br>
<button type="submit" (click)="check()">Check</button>

或者，您可以通过为输入 html 提供本地引用并在按钮单击函数中引用它来剪切一些代码

  check(value){
    console.log('running check',value)
  }

<input type="text" #myInput> <br><br>
<button type="submit" (click)="check(myInput.value)">Check</button>