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 manera de usar la tubería asíncrona en la plantilla html para suscribirse y vincularla 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 cancelar la suscripción en OnLeave/OnDestroy, pero tenía curiosidad por saber si podía usar la tubería asíncrona.
Salud
# es la variable de referencia de la plantilla . Se remite al elemento DOM y no se puede usar así.
Las variables locales no están implementadas en Angular a partir de ahora, este problema cerrado se puede monitorear 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 de ngIf para obtener más información. Entonces es posible hacer
<div *ngIf="user$ | async; let user"> <h3> {{user.name}} </h3> </div> Esto creará un elemento contenedor div y le proporcionará un comportamiento de encubrimiento, por lo que no hay necesidad de ?. Operador 'Elvis'.
Si no se desea un marcado adicional, se puede cambiar a
<ng-container *ngIf="user$ | async; let user">...</ng-container>Si el comportamiento de encubrimiento no es deseable, la expresión se puede cambiar a un valor de marcador de posición verdadero.
Un marcador de posición puede ser un objeto vacío para el valor del objeto,
<div *ngIf="(user$ | async) || {}; let user"> <h3> {{user?.name}} </h3> </div>O un espacio para el valor primitivo,
<div *ngIf="(primitive$ | async) || ' '; let primitive"> <h3> {{primitive}} </h3> </div>@Bjorn Schijff y @estus
En vez de:
<div *ngIf="(user$ | async) || {}; let user">Hacer:
<div *ngIf="(user | async) as user">Utilice la siguiente sintaxis:
<div *ngIf="(user | async) as user">Nota: La adición de " como usuario " al final de la expresión.
Lo que esto hará es esperar hasta que user$ | async ha evaluado y vincula el resultado al valor del usuario (sin sufijo de dólar).