离子排除* ngFor

问题描述

如果要从* 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

解决方法

因为您的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">