Table cells not rendering as desired for ngFor

Maureen Moore

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

This is my html:

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:

My desired rendering is:

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Maureen Moore6y ago
The solution was posted here: https://groups.google.com/forum/#!topic/angular/ROO8TCiw5Qw
+1
Laxmidhar Sahoo6y ago
localStorage.setItem('items', JSON.stringify(this.items));
+1
Maureen Moore6y ago
Thanks, Laxmidhar Sahoo and Rajanikant Hawaldar
+1
Maureen Moore6y ago
The Items array actually needs to be saved to localStorage. How do I push an array to localStorage?
+1
Laxmidhar Sahoo6y ago
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;
}
+1
Rajanikant Hawaldar6y ago
1. export class ShoppingCartComponent implements OnInit {
2. constructor() {
3. items = [];
4. }
6. onSubmit(quantity, product_name, product_price){
8. localStorage.setItem('items', JSON.stringify(quantity, product_name, product_price));
10. this.items.push( String(quantity), product_name, product_price );
11. }
+1