угловое - использование асинхронной трубы на наблюдаемом <object> и привязать его к локальной переменной в html

Привет У меня есть наблюдаемый пользователь $ с большим количеством свойств (имя, название, адрес...)

component{
  user$:Observerable<User>;
  constructor(private userService:UserService){
    this.user$ = this.userService.someMethodReturningObservable$()
  }
}

Есть ли способ использовать асинхронный канал в html-шаблоне для подписки на него и привязать его к локальной переменной, подобной этой

<div #user="user$ | async">
  <h3> {{user.name}}
</div>

Я знаю, что может подписаться на него в конструкторе, а затем отказаться от подписки в OnLeave/OnDestroy, но мне было просто любопытно, могу ли я использовать асинхронный канал.

ура

Ответ 1

# является ссылочной переменной шаблона. Он отбрасывает элемент DOM и не может использоваться таким образом.

Локальные переменные в настоящее время не реализованы в Angular, этот закрытый вопрос можно отслеживать для ссылок на связанные проблемы.

Начиная с Angular 4, синтаксис директив ngIf и ngFor был обновлен, чтобы разрешить локальные переменные. Подробнее см. ngIf. Так что можно сделать

<div *ngIf="user$ | async; let user">
  <h3> {{user.name}}
</div>

Это создаст элемент обертки div и предоставит ему маскирующее поведение, поэтому нет необходимости ?. Оператор "Элвис".

Если никакой дополнительной разметки не требуется, ее можно изменить на

<ng-container *ngIf="user$ | async; let user">...</ng-container>

Если поведение клоакинга нежелательно, выражение может быть изменено на истинное значение заполнителя.

Заполнитель может быть пустым объектом для значения объекта,

<div *ngIf="(user$ | async) || {}; let user">
  <h3> {{user?.name}}
</div>

Или пространство для примитивного значения,

<div *ngIf="(primitive$ | async) || ' '; let primitive">
  <h3> {{primitive}}
</div>

Ответ 2

@Bjorn Schijff и @estus

Вместо:

<div *ngIf="(user$ | async) || {}; let user">

Делать:

<div *ngIf="(user | async) as user">

Ответ 3

Используйте следующий синтаксис:

<div *ngIf="(user | async) as user">