检查 Observable 是否未定义

Question

在 Angular 7 应用程序上，我有以下模板：

<div *ngIf="avatarUrl$ | async;">
  <ng-container *ngIf="avatarUrl$ | async as avatarUrl">
    <img [src]="avatarUrl ? avatarUrl : 'avatar-default.png'">
  </ng-container>
</div>

将avatarUrl$作为从数据库中通过服务获得是可观察到的。

我只想在avatarUrl$加载值后显示 IMG 。

但是，有时从服务中获得的值是未定义的。

在这种情况下，我需要显示默认头像，例如：avatar-default.png。

问题是未定义avatar-default.png时不显示avatarUrl$。

我认为因为这种情况与未加载和正在加载但未定义的值没有区别？

<div *ngIf="avatarUrl$ | async;">

我该如何解决这个问题？

Answer 1

似乎有点多余，你可以这样做：

<div>
  <img [src]="(avatarUrl$ | async) || 'avatar-default.png'">
</div>

或者在您的组件中更改您的 observable：

readonly avatarUrl$ = this.getAvatarFromSomeWhere().pipe(
  startWith('avatar-default.png')
);

<div>
  <img [src]="avatarUrl$ | async">
</div>

然后你不需要做任何事情||，只需保持模板简单。这种方式仅在您确定请求最终会返回头像时才有效

否则，您可以使用map它对其进行扩展，以确保它始终返回一个值：

private readonly defaultAvatar = 'avatar-default.png';

readonly avatarUrl$ = this.getAvatarFromSomeWhere().pipe(
  map((avatar) => avatar || this.defaultAvatar),
  startWith(this.defaultAvatar)
);

编辑

@C_Ogoo 是对的，我应该读得更好。

如果您希望它仅在加载后显示，您只需要像这样更改 observable：

readonly avatarUrl$ = this.getAvatarFromSomeWhere().pipe(
  map((avatar) => avatar || 'avatar-default.png')
);

你可以做这样的模板：

模板

<div *ngIf="avatarUrl$ | async as avatarUrl">
  <img [src]="avatarUrl">
</div>