*具有订阅功能的ngIf指令
*具有订阅功能的ngIf指令
提问于 2021-06-07 05:42:58
我经常遇到一个使用*ngIf的“问题”。通常返回布尔值的函数在其中有一个订阅。当对指令进行多次检查时，最终会发出多个请求并导致页面崩溃。我真的不知道怎么解决它。下面是一个例子：
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>我的第一个选择是使用一个“标志”变量来解决这个问题，该变量检查输入occurred...but的次数，我认为这不是最好的方法。
编辑:更详细的
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-07 05:47:14
您可以使用async管道解决问题。多亏了它，我们可以在模板中使用async变量。
首先，verifySomething函数必须返回可观测值。
verifySomething(value: number): Observable<boolean> {
return this.myService.function(value);
}然后，我们需要更新模板文件。它必须使用带有async指令的*ngIf管道。
<tag *ngIf="verifySomething(entity.id) | async">irrelevant</tag>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67872815
复制相关文章
相似问题
腾讯云开发者
