如何使用角度8在表中显示数组值？

Question

以下是Api

{
"data": [
  {
      "id": "sdff12",
      "documentTypeId": "617ffgv22",
      "fileType": "TIFF",
      "attributes": [
          {
              "attributeId": "1",
              "customerName": "XYZ",
              "VIN": "10XYAZHSKS"
          },
          {
              "attributeId": "2",
              "customerName": "ABC Dealer",
              "VIN": "98GSBS8S6D"
          }
      ]
  }
]}

我需要在普通的html表中显示attribute []内部的值

我希望输出为，

 **CustName**    |     **VIN**

       xyz       |  10XYAZHSKS

  ABC Dealer     |   98GSBS8S6D

有人可以帮我吗？

Answer 1

ngFor，

   <thead>
        <tr>
            <th>Customer Name</th>
            <th>VIN</th>
        </tr>
    </thead>
     <tbody>
        <tr *ngFor='let dataobj of fetchData.data[0]?.attributes'>
          <td>{{ dataobj.customerName}}</td>
          <td>{{ dataobj.VIN}}</td>
     </tbody>
   </table>

STACKBLITZ DEMO

Answer 2

interface，它具有上面的属性，让我为您创建...

创建一个名为data.model.ts的模型>

STACKBLITZ DEMO

//现在将数据分配给html.component.ts中的一个变量

数据：数据= [];
//然后将其绑定到Angular 8 HTML。
//例如：
export interface Data {
    id: number;
    documentTpyeId: string;
    fileType: string;
    attributes: Attributes[];

}

export interface Attributes {
    attributeid: number;
    customerName: string;
    vin: string;
}
让我知道是否需要进一步的讨论

注意：如果某些操作无效，请验证语法。 

Answer 3