async - angular-usando una tubería asíncrona en<Object> observable y vincúlela a una variable local en html

ngif

Question

Hola, tengo un usuario $ observable con muchas propiedades (nombre, título, dirección ...)

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

¿Hay alguna forma de utilizar el conducto asíncrono en la plantilla html para suscribirse y vincularlo a una variable local como esta?

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

Sé que puedo suscribirme a él en el constructor y luego anular la suscripción en OnLeave / OnDestroy, pero tenía curiosidad por poder usar la canalización asíncrona.

Aclamaciones

Answer 1

@Bjorn Schijff y @estus

En lugar de:

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

Hacer:

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

Answer 2

Utilice la siguiente sintaxis:

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

Answer 3

# es la variable de referencia de la plantilla . Difiere al elemento DOM y no se puede usar de esa manera.

Las variables locales no están implementadas en Angular a partir de ahora, este problema cerrado puede ser monitoreado para las referencias a problemas relacionados.

Desde Angular 4, la sintaxis de las directivas ngIf y ngFor se actualizó para permitir variables locales. Consulte la referencia ngIf para más detalles. Así que es posible hacer.

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

Esto creará un elemento de envoltura div y le proporcionará un comportamiento de camuflaje, por lo que no es necesario ?. Operador ''elvis''.

Si no es deseable un marcado adicional, se puede cambiar a

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

Si el comportamiento de camuflaje no es deseable, la expresión se puede cambiar a un valor de marcador de posición de verdad.

Un marcador de posición puede ser objeto vacío por valor de objeto,

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

O un espacio para el valor primitivo,

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