*ngIf 带有订阅功能的指令

Question

我经常运行遇到与 *ngIf 合作的“问题”。通常 returns 布尔值的函数内部有一个订阅。由于该指令被多次检查，最终会发出多个请求并且页面崩溃。我真的不知道如何解决它。这是一个例子：

MyService.service.ts:

myFunction(argument: any): Observable<boolean> {
   // body that returns the observable using HttpClient

}

MyComponent.component.ts:

constructor(private myService: MyService){}

verifySomething(value: number): boolean {

  this.myService.function(value).subscribe((aux) => v); // this is supposed to return what is inside of subscribe to the "upper-function" (verifySomething)
}

MyComponent.component.html:

<tag *ngIf="verifySomething(entity.id)">irrelevant</tag>

我的第一个替代方案是使用“标志”变量来检查输入发生的次数...但我认为这不是最好的方法。

编辑：更详细

MyComponent.component.html:

<div *ngIf="values$ | async as values"> 
   <tbody>
      <tr *ngFor="let value of values.content">
        <td *ngIf="verifySomething(value.id)"> {{ value.property1 }}
        <td *ngIf="verifySomething(value.id)"> {{ value.property2 }}
     </tr>
   </tbody>
</div>

Answer 1

您可以使用 async 管道解决您的问题。多亏了它，我们可以在模板中使用 async 个变量。

首先，verifySomething 函数必须 return 可观察。

verifySomething(value: number): Observable<boolean> {

  return this.myService.function(value);
}

然后，我们需要更新模板文件。它必须使用带有 *ngIf 指令的 async 管道。

<tag *ngIf="verifySomething(entity.id) | async">irrelevant</tag>

*ngIf 带有订阅功能的指令

*ngIf directive with subscribe function

angular

subscribe