如何在此代碼中為用戶包含異步？
<div *ngIf="usersService.loaded$ | async">
<nb-card>
<nb-card-header>
<h1> {{ user?.name }} | {{ user?.age }} </h1>
</nb-card-header>
</nb-card>
使用商店中的方法啟動用戶如下：
this.user = this.route.params
.pipe(
takeUntil(this.destroyed$),
switchMap(({ userId }) => this.usersService.getSelectedUser(userId))
);
uj5u.com熱心網友回復：
只需將異步管道呼叫用方括號括起來：
<div *ngIf="usersService.loaded$ | async">
<nb-card>
<nb-card-header>
<h1>{{ (user | async)?.name }} | {{ (user | async)?.age }}</h1>
</nb-card-header>
</nb-card>
</div>
uj5u.com熱心網友回復：
這是一種解決方案：
<div *ngIf="usersService.loaded$ | async">
<nb-card>
<nb-card-header>
<ng-container *ngIf="user | async as usr; else notFound">
<h1>{{usr.name}} | {{usr.age}}</h1>
</ng-container>
</nb-card-header>
</nb-card>
</div>
<ng-template #notFound>
<div >could not locate the user</div>
</ng-template>
如果您想在卡片的其他部分使用用戶，您可以將 移動*ngIf="user | async as usr"到<nb-card>元素。這樣，用戶就可以在任何卡片內容中使用。
<div *ngIf="usersService.loaded$ | async">
<nb-card *ngIf="user | async as usr; else notFound">
<nb-card-header>
<h1>{{usr.name}} | {{usr.age}}</h1>
</nb-card-header>
<nb-card-content>
{{usr.bio}}
<nb-card-content>
</nb-card>
</div>
<ng-template #notFound>
<div >could not locate the user</div>
</ng-template>
在上述兩種情況下，如果用戶 observable 的值為 null，則 *ngIf 將失敗。在某些情況下，您可能希望在用戶為空時使用默認值。我一直在使用這個小技巧，我可能在某處學到了 SO :)
<div *ngIf="usersService.loaded$ | async">
<nb-card *ngIf="{usr: user | async} as obs">
<nb-card-header>
<h1>{{obs.usr?.name || 'Jane Doe'}} | {{obs.usr?.age || '100'}}</h1>
</nb-card-header>
<nb-card-content>
{{obs.usr?.bio || 'Very Famous'}}
<nb-card-content>
</nb-card>
</div>
實際上，我可能會像這樣加入兩個 observables ......
<ng-container *ngIf="{loaded: usersService.loaded$ | async, usr: user | async} as obs">
<div *ngIf="obs.loaded">
<nb-card>
<nb-card-header>
<h1>{{obs.usr?.name || 'Jane Doe'}} | {{obs.usr?.age || '100'}}</h1>
</nb-card-header>
<nb-card-content>
{{obs.usr?.bio || 'Very Famous'}}
<nb-card-content>
</nb-card>
</div>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/436035.html
上一篇：單擊按鈕時元素未隱藏