如何獲取JSON數據並在Angular 8輸入類型的組件HTML中顯示

Question

編輯

嗨，讓我清除下面的問題。.我編輯了下面的所有源代碼，首先我有兩個json文件（一個來自付款，另一個來自銷售），但再次與API進行檢查之后。.我只能使用一個顯示所有數據的JSON。

請檢查我修改過的JSON報告和所有reff的源代碼，我擔心的是，當我將“ pzrgb2l1lc8w7dp5”（來自付款對象）放在html.component中時，該表格將顯示“ sale_id”和“ status”（來自付款對象）和“名字”，“姓氏”和“電子郵件”（來自具有相同“ sale_id”的客戶對象）。

編輯

以前為這個問題已經存在而道歉，但似乎還沒有，因為已經過了一周，我一直在尋找解決問題的方法，但沒有找到答案。

我已經設法使用angular從HTTP服務獲取JSON數據，我有兩個JSON Urls，並且希望成為一份報告並成功。 但我想使用輸入和按鈕來獲取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 input元素。 然后可以通過單擊按鈕功能訪問此值。 例如

  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>