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

我建议您创建一个界面，该界面具有上面的属性，让我为您创建...

创建一个名为 data.model.ts

的模型

export interface Data {
    id: number;
    documentTpyeId: string;
    fileType: string;
    attributes: Attributes[];

}

export interface Attributes {
    attributeid: number;
    customerName: string;
    vin: string;
}

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

数据：数据= [];

//然后将其绑定到Angular 8 HTML。

//例如：

<div class="col-lg-12">
    <table class="table table-responsive">
        <thead>
            <th>AttributeId</th>
            <th>CustomerName</th>
            <th>VIN</th>
        </thead>
        <tbody>
            <tr *ngFor='let item of Data.Attributes'>
                <td>{{item.attributeId}}</td>
                <td>{{item.customerName}}</td>
                <td>{{item.vin}}</td>

            </tr>
        </tbody>
    </table>
</div>

让我知道是否需要进一步的讨论

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

Answer 3

在这里，您可以迭代并获取表。

<table>
    <thead>
        <th>AttributeId</th>
        <th>CustomerName</th>
        <th>VIN</th>
    </thead>
    <tbody>
        <tr *ngFor="let data of tableData.data[0].attributes">
            <th>{{data.attributeId}}</th>
            <th>{{data.customerName}}</th>
            <th>{{data.VIN}}</th>
        </tr>
    </tbody>
</table>

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

3 个答案: