[英]How to iterate object in angular2
Below is categoriesProducts json 以下是类别产品 json
catagoriesProducts: any[] = [
{
"categories":[
{
"catagories1": [
{
"productId": 2,
"productName": "catagories1 product1",
"productCode": "GDN-0023",
"releaseDate": "March 18, 2016",
"description": "15 gallon capacity rolling garden cart",
"price": 32.99,
"starRating": 4.2,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
},
{
"productId": 5,
"productName": "catagories1 product2",
"productCode": "TBX-0048",
"releaseDate": "May 21, 2016",
"description": "Curved claw steel hammer",
"price": 8.9,
"starRating": 4.8,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
}]
},
{
"catagories2": [
{
"productId": 2,
"productName": "catagories2 product1",
"productCode": "GDN-0023",
"releaseDate": "March 18, 2016",
"description": "15 gallon capacity rolling garden cart",
"price": 32.99,
"starRating": 4.2,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
},
{
"productId": 5,
"productName": "catagories2 product2",
"productCode": "TBX-0048",
"releaseDate": "May 21, 2016",
"description": "Curved claw steel hammer",
"price": 8.9,
"starRating": 4.8,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
}]
},
{
"catagories3": [
{
"productId": 2,
"productName": "catagories3 product3",
"productCode": "GDN-0023",
"releaseDate": "March 18, 2016",
"description": "15 gallon capacity rolling garden cart",
"price": 32.99,
"starRating": 4.2,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
},
{
"productId": 5,
"productName": "catagories3 product3",
"productCode": "TBX-0048",
"releaseDate": "May 21, 2016",
"description": "Curved claw steel hammer",
"price": 8.9,
"starRating": 4.8,
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
}]
}]
}];
Inside component I am using below code to display the result. 在组件内部,我正在使用下面的代码来显示结果。
<tbody>
<tr *ngFor='let categoriesList of catagoriesProducts[0].categories[0].catagories1'>
<td></td>
<td>{{ categoriesList.productName }}</td>
<td>{{ categoriesList.productCode }}</td>
<td>{{ categoriesList.releaseDate }}</td>
<td>{{ categoriesList.price }}</td>
<td>{{ categoriesList.starRating }}</td>
</tr>
<tr *ngFor='let categoriesList of catagoriesProducts[0].categories[1].catagories2'>
<td></td>
<td>{{ categoriesList.productName }}</td>
<td>{{ categoriesList.productCode }}</td>
<td>{{ categoriesList.releaseDate }}</td>
<td>{{ categoriesList.price }}</td>
<td>{{ categoriesList.starRating }}</td>
</tr>
<tr *ngFor='let categoriesList of catagoriesProducts[0].categories[2].catagories3'>
<td></td>
<td>{{ categoriesList.productName }}</td>
<td>{{ categoriesList.productCode }}</td>
<td>{{ categoriesList.releaseDate }}</td>
<td>{{ categoriesList.price }}</td>
<td>{{ categoriesList.starRating }}</td>
</tr>
</tbody>
and I am getting below result. 而且我得到的结果低于。
Is there any best way by which i can do iterate dynamically? 有什么最好的方法可以动态地进行迭代?
Try this approach, also you should use this custom "keys" pipe : 尝试这种方法,也应该使用此自定义“键”管道 :
<ng-container *ngFor='let category of catagoriesProducts[0].categories; let i = index'>
<ng-container *ngFor='let key of category | keys'>
<ng-container *ngIf="key=='catagories' + (i + 1)">
<tr *ngFor="let categoriesList of category[key]">
<td></td>
<td>{{ categoriesList.productName }}</td>
<td>{{ categoriesList.productCode }}</td>
<td>{{ categoriesList.releaseDate }}</td>
<td>{{ categoriesList.price }}</td>
<td>{{ categoriesList.starRating }}</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.