Как отобразить значение массива в таблице, используя угловые 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-таблице

Я хочу вывод в виде

 **CustName**    |     **VIN**

       xyz       |  10XYAZHSKS

  ABC Dealer     |   98GSBS8S6D

Кто-нибудь может мне помочь ??

Answer 1

Я предлагаю вам создать один интерфейс , который будет иметь свойства, подобные описанным выше, позвольте мне создать для вас ...

создать одну модель с именем 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 2

Вот как это можно перебрать и извлечь из таблицы.

<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>

Answer 3

Вы можете просто использовать 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