如何在 html 中使用异步

Question

如何在此代码中为用户包含异步？

<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))
      );

Answer 1

用方括号将异步管道调用括起来：

<div *ngIf="usersService.loaded$ | async">
  <nb-card>
    <nb-card-header>
      <h1>{{ (user | async)?.name }} | {{ (user | async)?.age }}</h1>
    </nb-card-header>
  </nb-card>
</div>

Answer 2

这是一种解决方案：

<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 class="error">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 class="error">could not locate the user</div>
</ng-template>

在上述两种情况下，如果用户可观察值的值为空，那么*ngIf 将失败。在某些情况下，您可能希望在用户为空时使用默认值。我一直在使用这个我可能在某处学到的小技巧 :)

<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>

如何在 html 中使用异步

how to use async inside html

angular

ngrx

ngrx-store