时间戳

首页 > 解决方案 > 如何在 Angular 中使用 ngFor 仅显示某些数据类型？

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

问题描述

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

<ul>

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

</ul>

标签： htmlangulartypescriptngfortypescript-types

解决方案

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

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

推荐阅读