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 >

Maureen Moore · Answer

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

Laxmidhar Sahoo · Answer

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

Maureen Moore · Answer

Thanks, Laxmidhar Sahoo and Rajanikant Hawaldar

Maureen Moore · Answer

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

Laxmidhar Sahoo · Answer

hi export class ShoppingCartComponent implements OnInit { items: item[] = []; var item1 = new item ({ quantity: 1, product_name: 'abc' ,product_price: 20}); this .items.push(item1); localStorage.setItem( 'item' , JSON.stringify(item1); onSubmit(quantity, product_name, product_price){ var item2 = new item ({ quantity: quantity, product_name: product_name ,product_price: product_price}); this .items.push( item2 ); } } export class item { quantity: number; product_name: String; product_price: number; }

Rajanikant Hawaldar · Answer

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