如何在Angular中使用ngFor只显示某些数据类型?

Question

我正在迭代名为" fruits"的数组，其中包含" FruitService" "类型的对象。-我定义的一个类，想要显示每个元素，但删除它们后(我意识到这是奇怪的-没有数据库)，他们成为类型&;undefined&;污染了我的数组。我不想显示这些(它们显示为空白)所以我想只显示"FruitService"对象。我怎么做呢?

<ul>
<li *ngFor="let fruit of fruits">
{{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }}
</ul>

Answer 1

这个问题最好在控制器中处理。理想情况下，当移除相应的元素时，数组中应该没有undefined元素。它们实际上应该从数组中删除。

也就是说，在呈现元素之前，可以在模板中做一个简单的检查，看看元素是否已经定义。

<ul>
<ng-container *ngFor="let fruit of fruits">
<li *ngIf="fruit">
{{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }}
</li>
</ng-container>
</ul>

ng-container标记将在最终DOM中被注释掉，并且不会生成额外的元素。

Answer 2

您可以使用管道或通过检查它们是否为真来过滤它们:

<ul>
<ng-container *ngFor="let fruit of fruits">
<li *ngIf="!!fruit">
{{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }} 
</li>
<ng-container>
</ul>

带管道的解决方案:

<ul>
<ng-container>
<li *ngFor="let fruit of fruits | defined">
{{ fruit.name }}  price: {{ fruit._price }}   qty: {{ fruit.qty }} 
</li>
<ng-container>
</ul>

@Pipe({
name: 'defined'
})
export class DefinedPipe implements PipeTransform {
transform(array: any[]): any[] {
return array.filter(element => !!element);
}
}