typescript - როგორ ავავსოთ HTML ცხრილი JSON მასივის მნიშვნელობებით Angular-ში?

მე მაქვს მასივი შემდეგნაირად:

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 ცხრილის შევსება ამ მასივის გამოყენებით, როგორც ჩანს აღინიშნება გამოსახულებაში

.

მე ახალთაობელი ვარ ამაში, გთხოვთ დამეხმაროთ ამას აკეთებაში.

პასუხი #1

კომპონენტის თვისების სახელით 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>

Ng-run მაგალითი

პასუხი #2

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

სტეკბლიცის მაგალითი