html - 如何使用 *ngFor 下面提到的附图

Question

我正在使用 Angular 6，但我不知道如何在 html 表循环中使用 *ngFor。我需要以下附加屏幕截图的代码。也得到 API 响应

{
  "result": [
    [
      {
        "title": "Title 1",
        "sno": "1",
        "name": "abc",
        "phone": "123456",
        "email": "[e-mail]"
      },
      {
        "title": "Title 1",
        "sno": "2",
        "name": "def",
        "phone": "789456",
        "email": "[e-mail]"
      },
      {
        "title": "Title 1",
        "sno": "3",
        "name": "ghi",
        "phone": "4561230",
        "email": "[e-mail]"
      }
    ],
    [
      {
        "title": "Title 2",
        "sno": "1",
        "name": "john",
        "phone": "4561230",
        "email": "[e-mail]"
      }
    ]
  ]
}

标签： htmlangular6

Answer 1

使用嵌套的 ngFor 循环检查以下示例：

<table id="spreadsheet">
<tr *ngFor="let data of result">
    <td class="row-number-column">{{data[0].title}}</td>
    <td *ngFor="let item of data">
   <tr>
   <td class="row-number-column">{{item.sno}}</td>
   <td class="row-name-column">{{item.name}}</td>
   <td class="row-name-column">{{item.phone}}</td>
    </tr></td>
</tr>