ngFor mit Observablen?

Bin ich mit der Konvertierung eines Winkel-2-Komponente für die Verwendung der asynchronen Datenquellen.

Hatte ich eine <div class="col s4" *ngFor="let line of lines; let i = index;"> was auch geklappt hat, wenn lines wurde ein Array von Objekten, jedoch Linien ist nun eine Beobachtbare eines Arrays von Objekten.

Dieser Ursachen Fehler:

Nicht finden kann, unterscheiden sich die Unterstützung Objekt ‚[object]‘ des Typs ‚Objekt‘. NgFor unterstützt nur die Bindung an Iterables wie Arrays.

Versuchte ich <div class="col s4" *ngFor="let line of lines | async; let i = index;"> jedoch, das schien nicht zu einen Unterschied machen.

Wie soll ich damit umgehen?

  • Sind Sie sicher, dass das beobachtbare ein array zurückgibt? Können Sie überprüfen die Registerkarte „Netzwerk“?
  • Welche Art von Objekt?
  • versuchen {{lines | async | json}} zu sehen, wenn Ihre Beobachtbaren wirklich die erwarteten Daten. Vielleicht helfen Sie zu finden, die Wurzel des Problems. Hier ist ein Beispiel: plnkr.co/Bearbeiten/XqV1gYcYBDgquvh5CGKR?p=Album Vorhören



One Reply
  1. 2

    Hier ist ein Beispiel die Bindung an eine observable-array. Es wäre hilfreich, wenn Sie veröffentlicht Ihre controller/component-code zu.

    @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

    Mit einer Reihe von Beobachtbaren Objekt mit ngFor und Async-Rohr-Winkel-2

    Die Antwort auf die obige Frage ist diese:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.