Question

我有一个可观察的生成Users，它具有isLoading属性，这样就可以得到预期的结果：

{{ (user$ | async).isLoading }}

我希望能够在HTML属性中使用此isLoading属性，如下所示：

<button md-raised-button type="submit" [disabled]="user$.isLoading">Login</button>

但我使用的语法似乎没有。你如何在HTML属性中订阅这样的observable？

Answer 1

您可以在html标记中使用异步管道，如下例所示，只是不要忘记安全操作符：

<button md-raised-button type="submit" [disabled]="(user$ | async)?.isLoading">Login</button>

Answer 2

如果您已升级到Angular 4，则此处有一个选项是使用*ngIf。你可以这样做：

<div *ngIf="user$ | async; let user">

{{user.isLoading}}    

<button md-raised-button type="submit" [disabled]="user.isLoading">Login</button>

</div>

使用*ngIf，您可以使用async订阅观察者，并将值分配给let的变量。然后在模板中的其他位置使用该变量。

这是Angular 4中添加的新功能。大多数Angular2应用程序可以升级到4而无需更改。

希望有所帮助。

订阅Angular 2 HTML元素中的observable

2 个答案: