Как использовать * ng для нижеследующего прикрепленного изображения

Question

Я использую Angular 6, но я не знаю, как использовать * ngFor в html цикле таблицы. Мне нужен код для скриншота ниже. Также предоставляется ответ 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"
      }
    ]
  ]
}

Answer 1

Используйте вложенный ngFor Loop, проверьте приведенный ниже пример:

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