问题
I have an observable producing Users that have an isLoading property, such that this yields the expected result:
{{ (user$ | async).isLoading }}
I would like to be able to use this isLoading property in an HTML attribute, like this:
<button md-raised-button type="submit" [disabled]="user$.isLoading">Login</button>
but no syntax I use seems to do the trick. How do you subscribe to an observable like this in an HTML attribute?
回答1:
You can use async pipe in html tag like in example below, just don't forget safe operator:
<button md-raised-button type="submit" [disabled]="(user$ | async)?.isLoading">Login</button>
回答2:
One option you have here, if you've upgraded to Angular 4, is to use *ngIf. You can do something like this:
<div *ngIf="user$ | async; let user">
{{user.isLoading}}
<button md-raised-button type="submit" [disabled]="user.isLoading">Login</button>
</div>
With *ngIf you can subscribe to the observable with async and assign the value to a variable with let. Then user the variable in other places in your template.
This is a new feature added in Angular 4. Most Angular2 apps can be upgraded to 4 with no changes required.
Hope that helps.
来源：https://stackoverflow.com/questions/43663616/subscribing-to-an-observable-in-an-angular-2-html-element