從 Angular 中的 API 獲取數據時出現問題

Question

我正在嘗試從 API 獲取數據，當我 console.log() 它時，我在控制台中獲取數據，但是當我嘗試在我的表中獲取它時，我收到以下錯誤：錯誤錯誤：嘗試錯誤差異'[對象對象]'。 僅允許 arrays 和可迭代對象

我的 ts 文件

CovidPatients:any=[];

  show() {
    this.http.get('https:API-URL').subscribe(responseData=>{
    const data1=JSON.stringify(responseData)
    this.CovidPatients=JSON.parse(data1)  
    console.log(data1);

    })
  }

html

 <tr *ngFor="let data of CovidPatients">
        <td>{{data.agebracket}}</td> 
         <td>{{data.contractedfromwhichpatientsuspected}}</td>
        <td>{{data.currentstatus}}</td>
<tr>

在 API 中，數據位於嵌套數組中，我認為這可能是問題所在：

{
    "raw_data": [
        {
            "agebracket": "",
            "contractedfromwhichpatientsuspected": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "10/05/2020",
            "detectedcity": "",
            "detecteddistrict": "",
            "detectedstate": "",
            "entryid": "",
            "gender": "",
            "nationality": "",
            "notes": "",
            "numcases": "2",
            "patientnumber": "37900",
            "source1": "https://twitter.com/ANI/status/1259331384851775488?s=09",
            "source2": "",
            "source3": "",
            "statecode": "RJ",
            "statepatientnumber": "",
            "statuschangedate": "",
            "typeoftransmission": ""
        },
        {
            "agebracket": "",
            "contractedfromwhichpatientsuspected": "",.....................

如何在表格中顯示數據。

Answer 1

CovidPatients不是一個數組。 將您的 for 循環更改為：

<tr *ngFor="let data of CovidPatients.raw_data">

Answer 2

您可以執行以下操作，

show() {
this.http.get('https:API-URL').subscribe(responseData => {
    this.CovidPatients = responseData['raw_data']
    console.log(this.CovidPatients);
})}

然后在您的模板文件中，您可以使用 *ngFor 結構指令遍歷數組，

<tbody *ngFor="let data of CovidPatients">
<tr>
    <td>{{data.agebracket}}</td>
    <td>{{data.contractedfromwhichpatientsuspected}}</td>
    <td>{{data.currentstatus}}</td>
</tr>
<tbody>

Answer 3

JSON.stringify和JSON.parse當且僅當您在響應中獲得 JSON2668CFDE63131B459 在*ngFor中，如果不使用鍵值keyvalue ，則可以迭代 object 的數組。 在你的 JSON object raw_data是數組，所以你可以這樣嘗試

<tr *ngFor="let data of CovidPatients.raw_data">
{{data.agebracket}}
.
.
.
</tr>