Angular *ngFor中的离子排除元素

如果我想从*ngFor循环中排除某些内容，通常使用*ngIf

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

.HTML

{{food.data.name}

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

我正在做一个网格模式，每行有两个

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

由于这是一个异步循环，因此在任何时候，这些

“

名称都可以保存实际值，并将自动更新网格

但是，使用*ngIf会在网格中留下空格，而不是跳过那些有

“

名称的区域

我听说有很多方法可以使用管道来传递参数

我还没找到工作

---

我使用的是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">

---

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

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

transform（value:any[]，…args:any）：any{

之后，我必须添加

if（value==null）{return null；}

因为它是一个异步函数。它工作了！在

transform（value:any[]，…args:any）之后，{/code>我必须添加
if（value==null）{return null；}
，因为它是一个异步函数。