订阅 Angular 2 HTML 元素中的可观察对象

Question

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

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

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

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

但我使用的任何语法似乎都无法解决问题。如何在 HTML 属性中订阅这样的可观察对象？

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，无需进行任何更改。

希望有帮助。