如何从另一个角度列表生成列表?

Question

我想迭代整个列表，并根据某些值从原始列表中生成多个列表

这是一个例子

<div *ngIf="location.items?.length > 0">
<div *ngFor="let item of location.items">
<div *ngIf="item.type === 'a'">
#create another list of items with type 'a'
</div>
<div *ngIf="item.type === 'b'">
#create another list of items with type 'b'
</div>
</div>
</div>

有人可以解释一下我会怎么做

吗

Answer 1

最好不要尝试在模板中执行此操作。在存在location的组件中，您可以使用 Array.filter(( 创建所需的列表。

例如，要获得itemlocation.items与item.type === 'a'，我们会做

const aItems = location.items.filter(item => item.type === 'a');    // only contains items of type a
const bItems = location.items.filter(item => item.type === 'b');    // only of type b
// ... and so on

现在在您的模板中，只需将列表分成不同的*ngFor

<div *ngFor="let item of aItems">
<div>
{{item.someField}}
</div>
</div>
<div *ngFor="let item of bItems">
<div>
{{item.someField}}
</div>
</div>