Async tuyau de ne pas remplir les données de l'objet dans le modèle

Quelqu'un peut-il m'aider à voir si il y a une erreur de syntaxe ici dans mon template? Il ne donne pas d'erreur, mais ne pas remplir les données dans le modèle, soit:

<div *ngIf="(hero | async)">
  <h2>{{hero}}</h2>
  <h2>{{hero.name}} details!</h2>
  <div>
    <label>_id: </label>{{hero._id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name" />
  </div>
  <button (click)="goBack()">Back</button>
</div>

Code du composant

export class HeroDetailComponent implements OnInit {
    errorMessage: string;

    //@Input() 
    hero: Observable<Hero>;

    constructor(
        private _heroService: HeroService,
        private _routeParams: RouteParams) {
    }

    ngOnInit() {
        let _id = +this._routeParams.get('_id');
        this._heroService.loadHero(_id);
        this.hero = this._heroService.hero$;
        this.hero.subscribe(data => 
           console.log(data)
        )
    }

La console.log(data) imprime:

Objet {_id: 11, nom: "Monsieur Gentil"}

ce qui signifie que les données sont correctement récupérées.

La <div> bloc également présente, ce qui signifie *ngIf voit l'objet comme non-vide.

<h2>{{hero}}</h2> montre [object Object].

Mais pourquoi le {{hero.name}} ne s'affiche pas?

Vous avez quelques choses mélangées. hero est une entrée de la propriété, mais vous pouvez ensuite affecter une valeur dans ngOnInit() -- c'est étrange. La valeur assignée est un fait Observable, qui n'ont pas de name de la propriété, ce qui explique pourquoi {{hero.name}} ne fonctionne pas. Cette réponse devrait vous aider: stackoverflow.com/a/34561532/215945
J'ai mis à jour le post et supprimer le @entrée. Mais toujours le même. L'async pipe est censé tourner à la observables dans les héros de l'objet?

InformationsquelleAutor Shawn | 2016-04-22

angular angular2-template

58

Les objets sont un peu délicat avec les async pipe. Avec une Observable qui contient un tableau, on peut utiliser NgFor et de créer un modèle local variable (hero ci-dessous) qui est attribuée à chaque élément de la matrice après l'async pipe extraits de la matrice à partir de l'Observable. Nous pouvons ensuite utiliser cette variable ailleurs dans le modèle:
```
<div *ngFor="let hero of heroes | async">
  {{hero.name}}
</div>

```
Mais avec une Observable qui contient un seul objet, je ne suis pas au courant de toute façon de créer un modèle local variable qui fait référence à cet objet. Au lieu de cela, nous avons besoin de faire quelque chose de plus compliqué:
```
<div>{{(hero | async)?.name}}</div>
```
Et nous aurions besoin de le répéter, pour chaque propriété de l'objet que nous voulons afficher. (La ligne ci-dessus suppose que la propriété d'un composant hero est un fait Observable.)

Il est probablement plus facile d'affecter l'objet (qui est à l'intérieur de l'Observable, hero$ ci-dessous) à une propriété du composant, utilisez le composant logique:
```
this._heroService.hero$.subscribe(data => this.hero = data.json());
```
et ensuite utiliser NgIf ou la Elvis/sécurité de la navigation de l'opérateur pour afficher les données de la vue:
```
<div *ngIf="hero">{{hero.name}}</div>

<div>{{hero?.name}}</div>
```
- {{(héros | async)?.name}} ne fonctionne pas. J'ai fait la deuxième façon: abonnez-vous pour obtenir des données dans une propriété de composant et de référence dans le modèle. Merci de prendre le temps. Je l'apprécie.
- <div>{{(héros | async)?.name}}</div> - c'est juste parfait. M'a sauvé beaucoup de temps...
InformationsquelleAutor Mark Rajcok
22

Une autre option serait d'utiliser @Entrée et de tirer parti de la puce/muet approche par composants. Dans votre composant intelligent vous pouvez passer à la async objet de la muette composant, puis dans le muet composant vous pouvez l'utiliser comme un objet normal.

L'idée est que votre smart composante traite de la logique et des données et le muet composant gère présentation.

Composant intelligent:
```
<dumb-component [myHero]="hero$ | async"></dumb-component>
```
Muet classe de composant:
```
@Input() myHero: Hero;
```
Muet modèle de composant:
```
<div>{{ myHero.name }}</div>
```
- myHero est une chaîne de droite? Ne devrait-elle pas être '<div>{{ myHero }}</div>' au lieu de '<div>{{ myHero.name }}</div>' ?
InformationsquelleAutor chris cooley
18

C'est maintenant possible en utilisant le "comme" de la syntaxe, disponible en v4.0.0:
```
<span *ngIf="user$ | async as user; else loadingUserInfo">
 {{user.firstName}} {{user.lastName}}
</span>
<ng-template #loadingUserInfo>
  Loading user information...
</ng-template>
```
Plus de détails sont disponibles dans le RFC thread sur github.

InformationsquelleAutor jmcmichael
1

Je suis juste ajouter une précision sur la façon d'utiliser le smart /muet approche par composants dans le cas, vous devez utiliser la async pipe et un support de la syntaxe.

Qui combinent un truc trouvé ici.

HTML:
```
< ui-gallery-image([image]="(imagesFB | async) ? (imagesFB | async)[0] : null") ></ui-gallery-image>
```
J'ai passer des heures à trouver. Espérons que cette aide.
Plus d'info sur ce post de blog.

InformationsquelleAutor slucas

La meilleure façon de gérer un Unique de l'Objet observé à l'intérieur d'un Angulaires 2.3.x, ou Angulaire 4.x modèle est d'utiliser un async pipe avec une variable de modèle.

Voici un objectif commun angulaire développeurs. Prendre un tableau d'éléments de redux, et arracher un seul élément correspondant de la collection. Ensuite, le rendu de ce singulier objet dans un modèle.

COMPOSANT

@Component({
  selector: 'app-document-view',
  templateUrl: './document-view.component.html',
  styleUrls: ['./document-view.component.scss']
})
export class DocumentViewComponent implements OnInit {

  @select(['documents', 'items']) readonly documenList$: Observable<DocumentDTO[]>;
  public documentVO$: Observable<DocumentDTO>;

  constructor(private _state: NgRedux<IAppState>,
              private _route: ActivatedRoute,
              private _documentActions: DocumentActions) {

    _route.params.subscribe(params => {
      let modelId: number = parseInt(params['modelId']); //1          
      let documentId: number = parseInt(params['documentId']); //50
      this._documentActions.getDocument(modelId, documentId);
    });
  }

  ngOnInit() {

    //documenList holds all of the documents in our application state
    //but this view only wants a single element

    this.documentVO$ = this.documenList$.map(documents => documents.find(doc => doc.documentId === 50));
  }
}

VUE

<div class="row" *ngIf="documentVO$ | async as dto">
    <div id="about" class="col-12">
        <div id="title" class="paper meta">
            <p>{{ dto.title }}</p>
        </div>
    </div>
</div>

InformationsquelleAutor Jack Murphy

Vous devez vous connecter pour publier un commentaire.