Table cells not rendering as desired for ngFor

[Maureen Moore]

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>

[Maureen Moore]

The Items array actually needs to be saved to localStorage. How do I push an array to localStorage?

[tha...@rikkeisoft.com]

onSubmit(quantity, product_name, product_price){  

const data = {

   quantity,

   product_name,

   product_price

};

this.items.push(data);

localStorage.setItem('items', this.items);

[Maureen Moore]

Thanks ThangLD! With the tweak of localStorage.setItem('items', JSON.stringify(this.items)); it worked!

[Maureen Moore]

I am able to use splice to remove each item so it doesn't seem to be saving to localstorage. I can't test to see if it saves to localstorage by simply refreshing the page because when I refresh the page, the page re-compiles since I'm in development mode.

[ThangLD]

You can use Chrome Develop Tool to view local storage: F12 -> click tab Application

[Maureen Moore]

Thanks, ThangLD