首页 > 解决方案 > 我无法迭代对象 Object

问题描述

我有这样的嵌套 JSON

{"id":1,"category":"cat","iconUrl":"www.test.com","subCategoryEntity":[{"id":3,"subCategory":"sub3","products":[]},{"id":2,"subCategory":"sub2","products":[]},{"id":1,"subCategory":"sub1","products":[{"id":1,"fileDownloadUri":"http://localhost:8081/api/v1/downloadFile/paint-bucket-orange-2-300x300.jpg","productName":"Name","productPrice":20.0,"productDesc":"this is the discreption","productStock":15,"productImages":[]}]}]}

在此处输入图像描述

我需要遍历所有子类别并获取子类别中的所有产品

这是我的 Angular 代码

    <div *ngFor="let item of allProducts| keyvalue">
       {{item.key}}:{{item.value}}
   </div>

这是输出 我无法访问此对象对象

标签: angulartypescriptngfor

解决方案


要迭代所有子类别中的所有产品,您可以执行以下操作:

<div *ngFor="let subCategory of allProducts.subCategoryEntity">
   <div *ngFor="let product of subCategory.products">
      {{product.id}}-{{product.productName}}
   </div>   
</div>

我认为这就是你想要的,它不是最好的方法。

我建议您遍历 'allProducts' 和 'subCategories' 并提取变量中的产品以仅执行一个 'ngFor'


推荐阅读