ngFor avec Observables? - node.js, angular, typescript, angular2-observables

Je suis en train de convertir un composant angulaire 2 pour utiliser des sources de données asynchrones.

J'ai eu un <div class="col s4" *ngFor="let line of lines; let i = index;"> qui a fonctionné quand lines était un tableau d'objets, cependant, lines est maintenant un observable d'un tableau d'objets.

Cela provoque une erreur:

Impossible de trouver un objet de support différent "[objet Object]" de type "objet". NgFor ne prend en charge que la liaison à Iterables tels que Arrays.

j'ai essayé <div class="col s4" *ngFor="let line of lines | async; let i = index;"> cependant, cela ne semblait pas faire une différence.

Comment devrais-je gérer cela?

Réponses:

Voici un exemple de liaison à un tableau observable. Il serait utile que vous publiiez aussi le code de votre contrôleur / composant.

@Component({
selector: "my-app",
template: `
<div>
<h2>Wikipedia Search</h2>
<input type="text" [formControl]="term"/>
<ul>
<li *ngFor="let item of items | async">{{item}}</li>
</ul>
</div>
`
})
export class App {

items: Observable<Array<string>>;
term = new FormControl();

constructor(private wikipediaService: WikipediaService) {
this.items = this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.wikipediaService.search(term));
}
}

http://blog.thoughtram.io/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html

Utilisation d'un tableau de Observable Object avec ngFor et Async Pipe Angular 2

La réponse à la question ci-dessus est la suivante:

// in the service
getItems(){
return Observable.interval(2200).map(i=> [{name: "obj 1"},{name: "obj 2"}])
}

// in the controller
Items: Observable<Array<any>>
ngOnInit() {
this.items = this._itemService.getItems();
}

// in template
<div *ngFor="let item of items | async">
{{item.name}}
</div>