如何解决离子排除* 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">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。