在ngFor内部按值过滤项目，而无需编写管道。

14 浏览
0 Comments

在ngFor内部按值过滤项目，而无需编写管道。

我有以下组件：

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

现在我想使用ngFor来显示除mode存储的当前模式之外的所有模式中的按钮。我有以下代码：

我希望始终显示两个按钮，包含剩下的两个模式。我尝试了以下代码：

但它不起作用。我看到的所有问题都要求编写一个自定义管道来实现此功能，但是难道没有一种简单的方法来过滤一个字符串数组，只使用值吗？

0

3 答案

0 Comments

问题的出现原因：在ngFor循环中过滤项目的值时，通常会使用管道，但是在Angular v6+版本中不再推荐使用管道来过滤数据。这是因为管道在生产部署中存在代码压缩问题，并且非纯管道在每次更新时都需要重新运行，会导致性能问题。为了解决这个问题，Angular开发团队建议使用过滤函数来过滤数据。

解决方法：可以使用一个过滤函数来过滤数据，并在模板中调用这个函数来实现过滤。具体步骤如下：

1. 在组件中定义一个过滤函数，例如filterFunction，函数接受一个参数allButtons，并返回一个经过过滤后的数组：

filterFunction(allButtons): any[] {  
    return allButtons.filter(button => button !== this.mode);
}

2. 在模板中使用ngFor指令循环遍历数据，并调用filterFunction函数来过滤数据，例如：

通过以上方法，就可以在不使用管道的情况下实现对数据的过滤。

需要注意的是，如果需要过滤对象而不是简单的值，推荐使用现有的组件来实现。可以参考Angular官方文档中的相关链接获取更多信息。

在Angular v6+版本中，推荐使用过滤函数而不是管道来过滤数据。这样可以避免代码压缩问题和性能问题，并将逻辑代码从模板中转移到typescript文件中，以防止过时。

0
0 Comments

问题的原因是在ngFor循环中，需要根据特定条件对项目进行过滤，但不希望在页面上显示被过滤的项目。解决方法是在ngFor之前对列表进行过滤，而不是在循环过程中进行过滤。

解决方法是使用ng-container元素将ngFor指令包裹起来，并在ngIf条件中进行过滤。具体代码如下：

这样就可以在循环之前对列表进行过滤，只显示符合条件的项目，避免了在循环过程中进行过滤的问题。

0
0 Comments

问题的原因是在ngFor循环中，想要根据条件筛选出特定的项，但是不想使用管道来实现。解决方法是使用ng-template和ngIf结合，将条件放在ngIf中，实现筛选功能。

具体的解决方法如下：

在以上代码中，ng-template用于循环模板，ngFor用于循环数组modes，let-othermode用于定义循环的临时变量。在button上使用ngIf来判断othermode是否满足条件，如果满足则显示该button。

需要注意的是，如果在ng-template中使用let-语法，会导致"let-" is only supported on template elements.错误的发生。因此，应该将let-语法放在ng-template中使用。

以上代码在stackblitz中可以正常工作，你可以通过这个链接查看工作版本。

希望以上内容对你有帮助！

0