Проверьте, является ли 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$ - это наблюдаемое, полученное из базы данных через службу.

Я хочу отобразитьIMG только после того, как avatarUrl$ имеет загруженное значение.

Однако иногда это значение, полученное от службы, не определено.

В этом случае мне нужно отобразить аватар по умолчанию, например: avatar-default.png.

Проблема в том, что avatar-default.png не отображается, когда avatarUrl$ не определено.

Я думаю, что из-за этого условия, которое не отличается от значения, которое не загружается и являетсязагружен, но не определен?

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

Как я могу решить эту проблему?

Answer 1

Кажется немного избыточным, вы можете сделать это просто:

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

Или изменить наблюдаемое в вашем компоненте:

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

edit

@ C_Ogoo прав, я должен был прочитать лучше.

В случае, если вы хотите, чтобы он показывался только после загрузки, вы простонужно изменить наблюдаемое так:

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

и шаблон можно сделать так:

шаблон

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

Answer 2

Вы можете достичь этого с помощью объекта наблюдения. Это полезно, когда вы хотите, чтобы значение 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>

Answer 3

Значение первой проверки 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>