Question

我在div中嵌套了一些元素，并且我有两个服务，每个服务从不同的数组中获取数据。

我希望使用其中一个数组中的值创建一个元素，并使用另一个数组中的值创建第二个元素。

为了更好地理解，这是HTML模板代码：

    <mat-grid-tile *ngFor="let person of dataArray">
        <img height="200px" src={{image.src}} alt={{image.caption}}>
            <mat-grid-tile-footer>
            <h1>{{person.locationId.tutenUser.firstName}} </h1>
        </mat-grid-tile-footer>
    </mat-grid-tile>

我希望使用在一个数组中的数据创建img（此处未显示），并使用person变量创建h1，但是由于已经执行过*ngFor="let person of dataArray"的操作，我不敢写另一个*ngFor来遍历图像数组。

如何实现？

谢谢。

Answer 1

正如已经说过的，最好的方法是将两个数组组合为一个并在那个数组上循环。

但是，如果您真的想用这种方法，则可以在两个数组的顺序和长度匹配的情况下使用索引。

     <mat-grid-tile *ngFor="let person of dataArray; let i = index">
        <img height="200px" src={{imageArray[i].src}} alt={{imageArray[i].caption}}>
        <mat-grid-tile-footer>
            <h1>{{person.locationId.tutenUser.firstName}} </h1>
        </mat-grid-tile-footer>
    </mat-grid-tile>

因此索引为0的人在imageArray[0]中有其对应的图像

是否可以在同一元素上执行两个* ngFor指令？

1 个答案: