时间戳

首页 > 解决方案 > Angular *ngIf 多次调用，使用异步管道和订阅

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

问题描述

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

我有一个类——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>

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

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

标签： angulartypescriptrxjsobservable

解决方案

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

[T]isTrue()每次运行 Angular 变化检测时都会执行该函数。这可以是很多次！

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

推荐阅读