将对象转换成数组

在开发模式下,items是一个数组,但是在部署应用程序后,它变成了一个对象,并且在控制台中出现以下错误: 找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables,例如数组。

在组件中:

items = [];

setStorageItems(items: any[]) {
    localStorage.setItem('items', JSON.stringify(items));
}

getStorageItems(): any[] {
    try {
     return JSON.parse(localStorage.getItem('items'));
    } catch(err) {
     console.warn(err);
     return [];
    }
}

ngOnInit(): void {
   this.items = this.getStorageItems();
 }

在HTML中:

<tr *ngFor="let item of items">
  <td>{{item.quantity}} </td>
  <td>{{item.product_name }}</td>
</tr>

在调用onSubmit函数之前,不会设置项目。看起来像这样:

storageKey = 'MyDataStorageKey';

public onSubmit(thumbnail, quantity, product_name, product_price){

var data = {
   thumbnail,
   quantity,
   product_name,
   product_price
};

if (this.items instanceof Array) {
console.log("is an array");
} else {
console.log("is not an array");
data => this.items = [data];
}
this.items.push(data);
localStorage.setItem(this.storageKey, JSON.stringify(this.items));
}
评论
  • 情癌晚期
    情癌晚期 回复

    您需要先调用setStorageItems才能将产品存储在本地存储中,如下所示:

      ngOnInit(): void {
          let itemsInput = [];
            itemsInput.push({quantity: '10', product_name:'Sample Prod'});
            itemsInput.push({quantity: '20', product_name:'More Prod'});
            this.setStorageItems(itemsInput);
           this.items = this.getStorageItems();
         }
    

    请参阅以下我使用您的代码的屏幕截图:

    See the below screenshot I used your code