ngFür Observables?

Question

Ich konvertiere eine eckige 2-Komponente, um asynchrone Datenquellen zu verwenden.

Ich hatte eine <div class="col s4" *ngFor="let line of lines; let i = index;">, die funktionierte, wenn lines war ein Array von Objekten, jedoch Linien ist jetzt ein Observable eines Array von Objekten.

Dies verursacht Fehler:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

versuchte ich <div class="col s4" *ngFor="let line of lines | async; let i = index;"> jedoch, dass kein Unterschied zu machen schien.

Wie soll ich damit umgehen?

Answer 1

Hier ist ein Beispiel, das an ein beobachtbares Array bindet. Es wäre hilfreich, wenn Sie Ihren Controller-/Komponentencode ebenfalls gepostet haben.

@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

Using an array from Observable Object with ngFor and Async Pipe Angular 2

Die Antwort auf die obige Frage lautet:

// 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>