Angular *ngIf 多次调用，使用异步管道和订阅

Question

我当前的角度设置面临问题，我无法弄清楚到底出了什么问题。在讨论问题之前，我将首先描述一些背景。

我有一个类 - data-service.ts，里面有一个方法“getData”。这是正文：

getData(): Observable<Data[]> {
let params = new HttpParams();
params = params.append('user_id', this.userId);
return this.http.get<Data[]>('api/data', {
  observe: 'body',
  responseType: 'json',
  params
}).pipe(
    map((response: any[]) => {
      return response.map((s) => ({
        id: s.id,
        userId: s.user_id,
        type: s.type_id,
        ...
      }));
    })
);}

我的要求是每次用户在 ngModal 中输入目标选项卡时获取此数据并刷新视图。当您单击目标选项卡时，模态组件“modal-component.ts”会获取此数据。单击选项卡会触发一个事件，通过这段代码：

getData(evt) {
  this.data$ = this.dataSevice.getData();
}

我使用异步管道将此“data$”可观察值传递给子组件：

<modal-component>
...
    <app-data-manager [data]="data$ | async"></app-data-manager>
...
</modal-component>

在“data-manager”内部，我在 [data] 上使用 *ngFor，并且对于每个数据，我都会渲染一些 html。在该 HTML 中，我使用 *ngIf 来确定应呈现哪个模板（第一个或第二个）。

<div *ngIf="isTrue(dataEntry); then first else second"></div>

问题是： 为每个 dataEntry 调用 isTrue 方法，这很好，但对于整个数据集，它被多次调用。就像数百次一样。我尝试使用 Promise、使用 Take(1) 管道、在映射期间分配布尔值（ngIf 用于选择模板的布尔值）、在订阅内部分配数据并传递普通集合，而不是使用异步管道。我不知道这是什么原因造成的 - 我感谢对此的每一个帮助。谢谢你！

附加信息当我在 *ngIf 中使用 dataEntry.isTrue 而不是 isTrue(dataEntry) 时 - 我仍然得到相同的结果。我还在子组件中添加了“OnChanges”，其中包含控制台日志 - 第一次单击它会记录到控制台一次，第二次单击它会记录到控制台两次。出现两条相同的消息。

Answer 1

问题是您在角度表达式中使用函数调用。不要这样做。

isTrue()每次运行角度变化检测时都会执行该函数。而且这可能是很多次！

由于 Angular 无法预测 的返回值是否isTrue()已更改，因此每次运行更改检测时都需要执行该函数。

这意味着整个应用程序（包括app-data-manager组件外部）的任何更改检测都将导致isTrue()执行。

本文详细讨论了它：https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496

一种解决方案是使用属性而不是函数。如果您想封装复杂的逻辑，请选择像这样制作自定义管道。

*ngIf="(dataEntry | isTruePipe); then first else second"></div>