检查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;">
我该如何解决？

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

[[[[[]]]]] >>

您可以通过可观察的对象来实现。当您希望在null中不阻塞观察对象中的undefined，0或*ngIf值时，此选项很有用

<div *ngIf="{url: avatarUrl$ | async} as data">
    <img [src]="data.url ? data.url : 'avatar-default.png'">
</div>

很高兴知道，如果需要，您可以在对象中包含多个可观察对象：

<div *ngIf="{url: avatarUrl$ | async, picture: pictureUrl$ | async} as data">
...
</div>

Observable的第一个检查值是未定义的。
<ng-container *ngIf= avatarUrl$ === 'undefined' | async ; else loaded >
        <img [src]='avatar-default.png'>
</ng-container>
<ng-template #loaded >
    <div *ngIf="avatarUrl$ | async;">
          <img [src]="avatarUrl">
    </div>
</ng-template>
 
似乎有点多余，您可以执行以下操作：
<div>
  <img [src]="(avatarUrl$ | async) || 'avatar-default.png'">
</div>

Answer 1

您可以通过可观察的对象来实现。当您希望在null中不阻塞观察对象中的undefined，0或*ngIf值时，此选项很有用

<div *ngIf="{url: avatarUrl$ | async} as data">
    <img [src]="data.url ? data.url : 'avatar-default.png'">
</div>

很高兴知道，如果需要，您可以在对象中包含多个可观察对象：

Answer 2

Observable的第一个检查值是未定义的。

<ng-container *ngIf= avatarUrl$ === 'undefined' | async ; else loaded >
        <img [src]='avatar-default.png'>
</ng-container>
<ng-template #loaded >
    <div *ngIf="avatarUrl$ | async;">
          <img [src]="avatarUrl">
    </div>
</ng-template>

Answer 3

似乎有点多余，您可以执行以下操作：