Ячейки таблицы не отображаются должным образом для ngFor

Question

Я пытаюсь визуализировать динамическую c таблицу с помощью директивы ngFor. Рендеринг не выполняется должным образом.

Это мой html:

<table>
<tr *ngFor="let item of items">
<td>{{item[1]}} </td>
<td>{{item[0]}} </td>
<td>{{item[2]}}</td>
</tr>
</table>
</form>

Это в моем контроллере:

export class ShoppingCartComponent implements OnInit  {
items = [];

onSubmit(quantity, product_name, product_price){

localStorage.setItem('items', JSON.stringify(quantity, product_name, product_price));

this.items.push( String(quantity), product_name, product_price );
}
}

Он отображается следующим образом:

<table>
<tr>
<td>quantity</td>
<td></td>
<td></td>
</tr>
<tr>
<td>product_name</td>
<td></td>
<td></td>
<tr>
<td>product_price</td>
<td></td>
<td></td>
</tr>
</tr>
</table>

Мой желаемый рендеринг:

<table>
<tr>
<td>quantity</td>
<td>product_name</td>
<td>product_price</td>
</tr>
</table>

Answer 1

Вы перебираете items, который представляет собой массив, содержащий значения. Чтобы извлечь заголовки, вы должны fetch его из одного из объектов, если хотите сделать это динамически.

Ниже приведен код, который решает вашу проблему (вы должны сделать это, когда первый элемент вставлен в ваш array):

 this.headers = Object.keys(this.items[0])

Вот код html:

<table border="2">
  <tr>
      <th *ngFor="let h of headers"> {{h}} </th>
  </tr>
<tr *ngFor="let item of items">
<td>{{item.quantity}} </td>
<td>{{item.product_name}}</td>
<td>{{item.product_price}}</td>
</tr>
</table> 

Вот рабочий пример: Пример StackBlitz