从角度模板调用多次方法

编程问答 2022-06-06

问题描述

我正在模板内部使用方法来调用该函数，该函数返回boolean值。问题是该函数被调用了6次以上。之后，我使用changeDetectionStrategy.onPush将通话减少到2次。下面是我的代码

HTML 

<div *ngIf="(checkboolObs(check$)) | async"></div>

TS 

check$: Observable<service> = this.data.getresponse();

ngOnInit() {
  this.checkboolObs();
}
checkboolObs(style):boolean {
  return somestyleIDS.includes(style.component)
}

如果找到该值，则返回true，但是它被调用了多次，我只需要调用一次。其背后的原因是因为checkboolobs()在导航时未触发某些时间，这就是为什么我从模板中调用此方法。

解决方法

这是正常现象，因为每次调用更改检测周期时，它将评估模板，而您的功能就是模板的一部分，因此将重新评估该功能（再次调用）。

有关Angular中更改检测如何工作的简要说明

想象一下，每次发生一个事件，都可能引起任何变化（例如，单击，某些时间间隔正在执行某些操作，ajax调用），Angular会使用该模板并为您重新评估（在其他情况下）单词会更新HTML）。

当您使用onPush策略时，您基本上是在告诉angular停止侦听所提到的任何更改，因为您将负责告诉框架更改发生的时间。 **免责声明，我们拥有可以在模板中使用的| async，它可以与onPush策略配合使用，并且如果通过引用更改检测触发您的输入更改也可以正常工作，但是正如我所说的，这是一个简要说明。

所以您可以做的是（我假设您是从check$观察到的ID）

myCheck$ = this.check$.pipe(map(arrayOfIds => arrayOfIds.includes(style.component)))

，然后在模板内将myCheck$与|async一起使用。

如果这不起作用，请更详细地说明您的用例。

,

另一种仅适用于您的打字稿代码的模板替代方案：

<ng-container *ngIf="check$ | async as check">
  <div *ngIf="checkboolObs(check))">...</div>
</ng-container>

在这里，您只会在可观察对象返回时评估 check，而在 check 管道的帮助下，false 不会评估为 async as

angularangularangular9rxjsrxjsrxjs-observablestypescripttypescripttypescript