在 ngIf 中使用 array.prototype.some

Question

我正在使用第 8 版开发 Angular 应用程序。在ngIf 表达式中，我想检查数组中存在的东西。所以我写了下面的表达式：

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

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

解析器错误：绑定不能包含第 34 列的赋值 [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()"

注意：建议记忆函数以避免性能问题。

Answer 2

问题在于您的绑定正在遍历列表并跟踪在后台分配的值。

对此有几个解决方案，首先是将您的逻辑放在执行此操作的组件类的公共方法中，这是两种解决方案中较慢的一种，因为每次更改检测运行时它都会检查您的数组值。

更好的解决方案是在数组更改时更新组件上的值

你可以这样做：

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input()
  set questionaire(value: Questionaire) {
    this.questionaire$.next(value);
  }

  readonly questionaire$ = new ReplaySubject<Questionaire>(1);
  readonly hasIntensities$ = this.questionaire$.pipe(
    map(questionaire => questionniare.factors.some(item => item.intensities.length > 0))
  );
};

然后在模板中你可以做这样的事情： *ngIf="hasIntensities$ | async"

您也可以通过更改检测器 ref 和 ngOnChanges 来完成它，但这应该是最有效的方法

Answer 3

这不是在 Angular 文档中编写的，但看起来你不能在结构指令中使用 Array.some，你应该将此逻辑移动到组件内的特定函数中。