arrays - 在 ngIf 中使用 array.prototype.some

Question

我正在使用第 8 个版本开发一个 angular 应用程序。内ngIf表达式，我想检查数组中的一些内容。所以我写了下面的表达式:

*ngIf="questionniare.factors.some(item => item.intensities.length > 0)"

但是现在我在控制台窗口中收到此错误:

Parser Error: Bindings cannot contain assignments at column 34 in [questionniare.factors.some(item => item.intensities.length > 0)]

但正如我所见，我的情况没有任何任务。那么问题出在哪里，我该如何解决呢？

(我知道我可以定义一个方法并在该方法中完成这项工作，但我想知道这是否是我下次应该考虑的 ngIf 的限制？)

Answer 1

错误消息提到了“赋值”，但问题是您正在组件模板内部创建箭头函数，这是不允许的。 feature request已在 GitHub 上发布，要求支持在 Angular 模板中创建这些函数。

为了使用Array.prototype.some在模板中，您必须在组件代码中定义谓词:

// You can define the predicate as a method
public itemHasIntensities(item): boolean {
  return item => item.intensities.length > 0;
}

// You can also define the predicate as an arrow function
public itemHasIntensities = (item): boolean => item.intensities.length > 0;

并将该函数作为参数传递给 Array.prototype.some在模板中:

*ngIf="questionniare.factors.some(itemHasIntensities)"

This stackblitz与您的原始代码类似并给出相同的错误。 This other stackblitz显示了具有在组件代码中定义的回调函数的相同示例。

话虽如此，正如问题中所提到的，最简单的解决方案是在组件方法中评估整个条件:

public showElement(): boolean {
  return this.questionniare.factors.some(item => item.intensities.length > 0);
}

*ngIf="showElement()"

注意:建议记住该函数以避免性能问题。