Table cells not rendering as desired for ngFor

1

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

I am not a pro at angular, but to my knowledge, wouldn’t it better to put the items[] inside of constructor or ngOnInit?

3

I tried putting the onSubmit function in my constructor but it threw an error.

4

Like this I am speaking of:

export class ShoppingCartComponent implements OnInit  {
constructor() {
   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 );
}
5

Tried that and it threw the error: Cannot find name ‘items’

6

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

7

Thanks for your help, razzakammar_nano

8

The solution was posted here: https://groups.google.com/forum/#!topic/angular/ROO8TCiw5Qw

9

Is this all of your code ?
I’m trying to figure out where the quantity, product_name and product_price come from ? who calls them ? The template/html ?