Angular 如何用json数组值填充html表？

我有一个数组，如下所示

var publicArray={
"settings": [{
"id": "1",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B1"
},
{
"title": "Comp ",
"value": "C1"
},
{
"title": " Pa Id",
"value": "P1"
}, {
"title": " NPI",
"value": "4535"
}
]
}, {
"id": "2",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B2"
},
{
"title": "Comp ",
"value": "C2"
},
{
"title": " Pa Id",
"value": "P2"
}, {
"title": " NPI",
"value": "34242"
}
]
}]
};

数组实际上来自数据库，因此它可以扩展到更多。因此，随着数组的增长，会出现更多行。 我需要用这个数组填充一个html表，如下图。我是新手，请帮我做这个

<table>
  <thead>
    <th>ID</th>
    <th>Business Unit</th>
    <th>Comp</th>
    <th>Pa Id</th>
    <th>NPI</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data.settings; let i=index">
      <td>{{item.id}}</td>
      <td *ngFor="let item2 of item.data">{{item2.value}}</td>
    </tr>
  </tbody>
</table>

身份证件
业务单位
公司
身份证
NPI
{{item.id}
{{item2.value}

---

将组件的属性称为

publicArray

您可以通过编写以下模板来实现这一点：

<table *ngIf="publicArray?.settings?.length && publicArray.settings[0].data?.length">
  <tr>
    <th>ID</th>
    <th *ngFor="let header of publicArray.settings[0].data">{{ header.title }}</th>
  </tr>
  <tr *ngFor="let row of publicArray.settings">
    <td>{{ row.id }}</td>
    <td *ngFor="let col of row.data">
      {{ col.value }}
    </td>
  </tr>
</table>

身份证件
{{header.title}}
{{row.id}}
{{col.value}}

---

有许多库可用于创建“打底”、“角度材质”等表格。…
我将给您举一个“ngx智能表”的例子：
.
您可以按照以下文档操作：

• 通过设置

  seetings{}

  对象，您将定义表头
• 然后从您带来的数据

  publicArray

  中定义另一个对象，以便它可以与

  settings{}