订阅 Angular 2 HTML 元素中的 observable答案

【问题标题】：Subscribing to an observable in an Angular 2 HTML element订阅 Angular 2 HTML 元素中的 observable
【发布时间】：2017-04-27 16:46:49
【问题描述】：

我有一个可观察的产生 Users 的 isLoading 属性，这样就会产生预期的结果：

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

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

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

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

【问题讨论】：

标签： html angular rxjs observable

【解决方案1】：

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

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

【讨论】：

完美，谢谢！没有意识到您可以在属性中使用该语法。

【解决方案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 订阅observable，并使用let 将值分配给变量。然后在模板的其他位置使用该变量。

这是 Angular 4 中添加的一项新功能。大多数 Angular2 应用程序都可以升级到 4，无需进行任何更改。

希望对您有所帮助。

【讨论】：