Table cells not rendering as desired for ngFor

Question

I am trying to render a dynamic table with the ngFor directive. It's not rendering as desired.

This is my html:

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

This is in my controller:

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 );
}
}

It is rendered as follows:

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

My desired rendering is:

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