Edit: Il me semble que mon principal problème à présent est que je ne parviens pas à afficher les données asynchrones d'un objet. J'ai une promesse contenant l'objet de données, et quand j'utilise
{{ data | async }}
il affichera
[object Object]
Le problème est que je veux pouvoir afficher tous les attributs. C'est-à-dire Nom, Symbole, etc. Dans Angular 1, je voudrais simplement utiliser
{{ data.Name | async }}
mais cela ne fonctionne pas ici, car le canal asynchrone tente de résoudre la promesse data.Name qui n'existe pas. Je veux résoudre la promesse de données et ensuite afficher la clé de nom de celui-ci. Pour le moment, je travaille sur la création de mon propre canal pour afficher une clé d'un objet asynchrone, mais je me demande s'il existe un canal ou une fonction Angular 2 intégré pour gérer cela!
J'ai créé une classe StockService qui renvoie une promesse contenant un objet à ma classe StockInfo, qui contient le code HTML à afficher. Je souhaite afficher le nom de cet objet dans mon code HTML, mais je n'arrive pas à le faire afficher.
Dans mon constructeur StockInfo:
this.stock.getStockData(this.ticker, http).then(function(val) {
this.data = val;
this.name = new Promise<string>(function(resolve) {
resolve(this.data.Name);
});
});
où this.stock est l'objet StockService.
Dans mon HTML:
<h2>{{name | async}}</h2>
J'ai essayé un certain nombre d'arrangements différents avant de me décider pour celui-ci. Je veux que la classe StockService gère la récupération de données et que la classe StockInfo gère l'affichage. Dans Angular 1, je créerais une usine pour récupérer des données et gérerais le traitement des données dans le contrôleur, mais je ne sais pas trop comment procéder à ce sujet dans Angular 2.
Existe-t-il un moyen de l'afficher ou existe-t-il de meilleurs moyens de concevoir mon code que je devrais examiner? Merci!
Vous n'avez besoin d'aucun tuyau spécial. Champ facultatif de support angulaire 2. Vous avez juste besoin d'ajouter? dans votre objet
{{ (data | async)?.name }}
ou
{{(name | async)?}}
Vous pouvez aussi utiliser plumer from rxjs / observable:
{{ user.pluck("name") | async }}
Pluck .__ Retourne un observable contenant la valeur d'une propriété imbriquée spécifiée parmi tous les éléments de la séquence Observable. Si une propriété ne peut pas être résolue, elle retournera undefined pour cette valeur.
Il n'y a rien de mal avec le accepté réponse ci-dessus. Mais il devient fastidieux d’ajouter | async?
lorsque nous devons afficher de nombreuses propriétés de l’objet. La solution plus pratique est la suivante:
<div *ngIf="data | async as localData">
<div> {{ localData.name }} </div>
<div> {{ localData.property1 }} </div>
<div> {{ localData.property2 }} </div>
</div>
Si vous travaillez avec Observable, vous pouvez afficher les données de la manière suivante:
<div *ngIf="data | async; let _data">
<h3>{{_data.name}}</h3>
</div>
ou
<h3>{{(data | async).name}}</h3>
Je pense que vous faites cela trop complexe et que vous devez juste faire quelque chose comme ça.
this.name =
this.stock.getStockData(this.ticker, http)
.then( val => val.Name )
et
<h2>{{name.Name | async}}</h2>
J'ai donc fini par écrire mon propre canal de clé asynchrone. Un grand merci à Simon de m'avoir aidé à me guider ici.
import {Pipe} from 'angular2/core';
@Pipe({
name: 'key',
pure: false
})
export class KeyPipe {
private fetchedPromise: Promise<Object>;
private result: string;
transform(value: Promise<Object>, args: string[]) {
if(!this.fetchedPromise) {
this.fetchedPromise = value
.then((obj) => this.result = obj[args[0]] );
}
return this.result;
}
}
Usage:
<h2>{{ data | key: 'Name' }}</h2>
Quelqu'un s'il vous plaît commenter si Angular a ses propres fonctions pour résoudre une clé d'un objet asynchrone.