javascript - 如何在 Angular2 中迭代对象

Question

下面是categoriesProducts 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"
        }]
    }]
}];

在组件内部我使用下面的代码来显示结果。

<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>

我得到的结果如下。

Ouput here

有什么最好的方法可以动态迭代吗？

Answer 1

尝试这种方法，你也应该使用这个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>