离子排除 *ngFor 中的元素答案

【问题标题】：Ionic excluding elements in *ngFor离子排除 *ngFor 中的元素
【发布时间】：2020-12-01 11:50:29
【问题描述】：

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

【问题讨论】：

我建议在组件中过滤掉这些值，让模板只处理显示数据。
我认为你应该遵循这个问题的答案：stackoverflow.com/questions/34164413/…
这在 MVC / MVVM 架构中被认为是一种不好的做法。您的模板应仅用于尽可能多地显示数据。我强烈建议您在后面的代码中执行必要的逻辑（例如组件 ts），然后将过滤后的数据传递给您的模板文件。这样，不仅渲染速度更快，而且可以帮助您更好地调试应用程序。
只是外部来源将从其他地方更新这些变量。如果我们从脚本中的数组中过滤掉空变量，它们可以被更新，并且由于它们被删除，它们将不会显示在 HTML 中。然而，这不是我通常会做的事情。

标签： angular typescript ionic-framework google-cloud-firestore pipe

【解决方案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">

【讨论】：

成功了！在transform(value: any[],...args:any): any { 之后我不得不添加if (value==null) {return null;}，因为它是一个异步函数。