* ng的使用方法

时间:2019-05-22 17:09:37

标签: html angular6

我正在使用角度6,但我不知道如何在html表循环中使用* ngFor。我需要以下所附屏幕截图的代码。还获得了API响应

{
  "result": [
    [
      {
        "title": "Title 1",
        "sno": "1",
        "name": "abc",
        "phone": "123456",
        "email": "abc@gmail.com"
      },
      {
        "title": "Title 1",
        "sno": "2",
        "name": "def",
        "phone": "789456",
        "email": "def@gmail.com"
      },
      {
        "title": "Title 1",
        "sno": "3",
        "name": "ghi",
        "phone": "4561230",
        "email": "ghi@gmail.com"
      }
    ],
    [
      {
        "title": "Title 2",
        "sno": "1",
        "name": "john",
        "phone": "4561230",
        "email": "john@gmail.com"
      }
    ]
  ]
}

enter image description here

1 个答案:

答案 0 :(得分: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>