Ionic 排除 *ngFor 中的元素

Question

通常情况下，如果我想从我的 *ngFor 循环中排除某些东西，我会使用 *ngIf。

但是在这种情况下我不能。

.HTML

<div class="grid">
    <div  *ngFor="let food of foods | async " >
        <ion-card *ngIf="food.data.name !=''">

           {{food.data.name}}

        </ion-card>
    </div>
<div>

这是一个过于简化的代码版本。

我正在为每行制作一个网格图案，其中有两个 <ion-card>。

我试图跳过数组中名称为空的元素 ""。

由于这是一个异步循环，因此这些 "" 名称可以随时保存真实值并自动更新网格。

但是，使用 *ngIf 会在网格中留下空白，而不是跳过那些具有 "" 名称的区域。

我听说有一些方法可以使用 *ngFor 的管道来传递参数。

我还没有成功。

我在使用 Ionic 6.10.1

Answer 1

因为你的 ngIf 在你的 «div *ngFor 里面，你总是有一个空的 div 尽管字符串是空的。您应该使用管道在与 *ngFor

相同的级别过滤值

@Pipe({name: 'filterEmpty'})
export class filterEmpty implements PipeTransform {
  transform(value: any[],...args:any): string {
   return value.filter(v => v.data.name !== ‘’); // or whatever filter you want
  }
}

在您的代码中：

<div *ngFor="let food of foods | async | filterEmpty">

Ionic 排除 *ngFor 中的元素

Ionic excluding elements in *ngFor

pipe

typescript

ionic-framework

angular

google-cloud-firestore