gpt4 book ai didi

Angular 2 : *ngFor in *ngFor

转载 作者:太空狗 更新时间:2023-10-29 17:46:25 28 4
gpt4 key购买 nike

以下场景在 javascript 中会很简单,但我在 Angular 中遇到了一些问题。

我有一个像这样的数组:

array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)

我现在尝试使用 ngFor 创建一个网格,其中的所有元素都在该列中的列和 block 中分离。所以我当前的代码(有效但令人讨厌)。

<div *ngFor="let a of a">
<template [ngIf]="a.column=='1'">
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='1'">
Block 1 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='2'">
Block 2 in column 1{{b.name}}
</template>
</div>
<div *ngFor="let b of a">
<template [ngIf]="b.blockrow=='3'">
Block 3 in column 1{{b.name}}
</template>
</div>
</template>
</div>

我会为每一列运行类似这样的操作。这意味着我循环遍历同一个数组 12 次。有什么办法可以做得更漂亮吗?

最佳答案

在您的组件中,使用 JavaScript 在正确的坐标处使用 a 的元素构建一个数组数组,然后在 *ngFor 中使用 *ngFor:

<div *ngFor="let row of rows">
<div *ngFor="let col of row">
Block {{col.blockrow}} in column {{col.column}} {{col.name}}
</div>
</div>

如果几个 block 具有相同的坐标,则可能需要第三个 *ngFor。

关于 Angular 2 : *ngFor in *ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43580067/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com