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

Question

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

<ul>

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

</ul>

Answer 1

您可以使用管道过滤它们或检查它们是否真实：

<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);
  }
}

Answer 2

这个问题最好在控制器中处理。理想情况下，删除相应元素时，数组中不应有 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 中被注释掉，不会生成额外的元素。

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

How do I display only certain data types with ngFor in Angular?

html

angular

typescript

ngfor

typescript-types