et le lier à la variable locale en html'/> et le lier à la variable locale en html'/> et le lier à la variable locale en html'/> angulaire - utiliser un tuyau asynchrone sur l'observable <Object> et le lier à la variable locale en html | abulletproofidea.com

Question angulaire - utiliser un tuyau asynchrone sur l'observable et le lier à la variable locale en 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 tube 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 vous pouvez vous y abonner dans le constructeur, puis vous désabonner dans OnLeave / OnDestroy, mais j'étais simplement curieux de savoir si je pouvais utiliser le tuyau asynchrone.

À votre santé


17
2018-04-10 14:24


origine


Réponses:


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

Les variables locales ne sont pas implémentées dans Angular dès maintenant, ce problème fermé peut être surveillé pour les références à des questions connexes.

Depuis Angular 4, la syntaxe de ngIf et ngFor les directives ont été mises à jour pour autoriser les variables locales. Voir ngIf référence pour plus de détails. Donc, il est possible de faire

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

Cela va créer div élément wrapper et fournira un comportement de cloaking, il n'y a donc pas besoin de ?. Opérateur 'Elvis'.

Si aucun balisage supplémentaire n'est souhaitable, il peut être modifié pour

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

Si le comportement de dissimulation n'est pas souhaitable, l'expression peut être changée en valeur de valeur fictive.

Un espace réservé peut être un objet vide pour la valeur de l'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>

49
2018-04-10 15:38



@Bjorn Schijff et @estus

Au lieu de:

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

Faire:

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

14
2017-09-28 07:56