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

【问题标题】：Angular *ngIf called multiple times, using async pipe and subscribeAngular *ngIf 多次调用，使用异步管道和订阅
【发布时间】：2021-06-09 20:32:36
【问题描述】：

我目前的角度设置存在问题，我无法弄清楚到底出了什么问题。在讨论这个问题之前，我将首先描述一些上下文。

我有一个类——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$”observable 传递给子组件：

<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>

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

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

【问题讨论】：

这是由于更改检测，您正在调用模板表达式的方法。 isTrue(dataEntry) 这就是问题所在。
@penleychan 我将其更改为使用 dataEntry.boolean 而不是 isTrue(dataEntry)。还是一样。此外 - 在第二次单击该组件时会调用两次更改检测。
请将相关代码添加到您更新的问题中。 dataEntry 是什么你的 onChange 是什么？
在开发中，变更检测运行两次。

标签： angular typescript rxjs observable

【解决方案1】：

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

[T]每次运行角度变化检测时都会执行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>

【讨论】：