Question

我从页面组件中获得了名为cats的数组： console.log(this.cats);向我展示了这一点

我希望将它绑定在（不那么简单）html模板中，它是：

<ion-grid *ngFor="let group of cats">
    <ion-row>
        <ion-col col-2></ion-col>

        <ion-col col-4 >
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-New-icon-c"></i>
                <p>{{group[0].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Tourism-icon"></i>
                <p>{{group[1].name}}</p>

            </div>
        </ion-col>
        <ion-col col-2></ion-col>
    </ion-row>
    <ion-row>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-money-icon"></i>
                <p>{{group[2].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Culture-icon"></i>
                <p>{{group[3].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Sport-icon"></i>
                <p>{{group[4].name}}</p>

            </div>
        </ion-col>
    </ion-row>
</ion-grid>

对于第一个{{group[0].name}}它运作良好但在其他情况下它给了我错误：

无法读取属性＆＃39; name＆＃39;未定义的

我这样做是因为我想循环每5个值以在离子网格中手动绑定它们。怎么解决这个？抱歉英语不好。

Answer 1

如果这是你的阵列：

猫= [[{ ID： '1'，图像： '1'，名称： 'G1' }， { ID： '1'，图像： '1'，名称： 'G1' }， { ID： '1'，图像： '1'，名称： 'G1' }， { ID： '1'，图像： '1'，名称： 'G1' }]，[ { ID： '1'，图像： '1'，名称： 'F1' }，{ ID： '1'，图像： '1'，名称： 'F1' }，{ ID： '1'，图像： '1'，名称： 'F1' }] ];

然后使用嵌套的for循环：

<div *ngFor="let group of cats">
  <div *ngFor="let obj of group">{{obj.name}}</div>
</div>

您可以根据需要从嵌套数组中获取值来使用这种* ngFor循环。

Angular2：使用* ngFor用于使用索引的多维数组

1 个答案: