如何在 Angular 中使用 ngFor 仅显示某些数据类型？答案

【问题标题】：How do I display only certain data types with ngFor in Angular?如何在 Angular 中使用 ngFor 仅显示某些数据类型？
【发布时间】：2021-05-24 12:07:36
【问题描述】：

我正在遍历名为“fruits”的数组，其中包含“FruitService”类型的对象——我定义的一个类并希望显示每个元素，但在删除它们之后（我意识到这很奇怪——没有 db）它们变成了“未定义”类型的污染我的数组。我不希望这些显示（它们显示为空白）所以我只想显示“FruitService”对象。我该怎么做？

<ul>

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

</ul>

【问题讨论】：

如何删除这些项目？您的数组不应包含未定义的值。所以你应该更好地修复你的删除方法，而不是尝试在 HTML 中过滤（这是可能的）

标签： html angular typescript ngfor typescript-types

【解决方案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 中被注释掉，并且不会生成其他元素。

【讨论】：

【解决方案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);
  }
}

【讨论】：