web-dev-qa-db-fra.com

angular - utilise un pipe asynchrone sur <Object> observable et le lie à une variable locale au format HTML

Salut, j'ai un utilisateur observable $ avec beaucoup de propriétés (nom, titre, adresse ...)

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

Existe-t-il un moyen d'utiliser le canal asynchrone dans le modèle html pour s'y abonner et le lier à une variable locale comme celle-ci

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

Je sais que je peux peut y souscrire dans le constructeur puis se désabonner de OnLeave/OnDestroy, mais j’étais curieux de savoir si je pouvais utiliser le pipe async.

À votre santé

angulartypescriptpipelocal-variablesangular2-observables
23
Han Che

# est variable de référence du modèle . Il diffère de l'élément DOM et ne peut pas être utilisé comme ça.

Les variables locales ne sont pas implémentées dans Angular pour l'instant, ce problème fermé peut être surveillé pour les références à des problèmes connexes.

Depuis Angular 4, la syntaxe des directives ngIf et ngFor a été mise à jour pour autoriser les variables locales. Voir ngIf reference pour plus de détails. Donc, il est possible de faire 

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

Cela créera un élément wrapper div et lui fournira un comportement de camouflage. Il n'est donc pas nécessaire d'utiliser l'opérateur ?. 'Elvis'.

Si aucun balisage supplémentaire n'est souhaité, vous pouvez le modifier en 

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

Si le comportement de camouflage n'est pas souhaitable, l'expression peut être remplacée par une valeur d'espace réservé véridique.

Un espace réservé peut être un objet vide pour une valeur d'objet, 

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

Ou un espace pour la valeur primitive,

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

@Bjorn Schijff et @estus

Au lieu de:

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

Faire:

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

Utilisez la syntaxe suivante:

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