Angular2: TypeError: Kann die Eigenschaft 'Symbol (Symbol.iterator)' von undefined nicht lesen

Question

Ich bin neu bei Observablen und experimentiere mit einer einfachen Autocomplete-Variante von Christoph Burgdorfs Observables in Angular2 blog. Ausführen dieses Codes erzeugt:

AUSNAHME: Typeerror: Kann lesen Eigenschaft 'Symbol (Symbol.iterator)' undefinierter

nicht nach dem REST in ingredientservice erhalten rufen Ausgabe ... rawsearch. Die Warnung wird auch mit einer Nachricht [object Object] angezeigt. Ich habe überprüft, dass der Endpunkt einwandfrei läuft.

Irgendwelche Empfehlungen auf, wie man dieses debuggt, würde sehr geschätzt.

inhaltsservice.ts wartet auf eine Änderung an einer Textzeichenfolge, debugnet sie und führt einen REST-Aufruf aus, um Übereinstimmungen mit Autocomplete von einem Endpunkt abzurufen.

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class IngredientService { 
    endpoint_url: String = "http://localhost:5000/ingredient/"; 
    results: Observable<Array<string>>; 
    constructor(private http: Http) { } 

    search(terms: Observable<string>, debounceDuration = 400) { 
    return terms.debounceTime(debounceDuration) 
     .distinctUntilChanged() 
     .switchMap(term => this.rawSearch(term)); 
    } 

    getData: Object[]; 
    rawSearch(term: string) { 
    console.log(term); 

    this.http.get(this.endpoint_url + term) 
     .subscribe(
     res => { 
     this.getData = res.json(); 
     console.log(this.getData); 
     return this.getData; 
     }, 
     error => alert(error)); 
    } 
} 

auf Vollständigkeit ich die Komponente ingredientsearch.ts enthalten sind, mit den empfohlenen fix

import {Component} from 'angular2/core'; 
import {Control} from 'angular2/common'; 
import {IngredientService} from './ingredientservice'; 
import {Observable} from 'rxjs/Observable'; 

@Component({ 
    selector: 'ingredient-search', 
    template: ` 
    <div> 
     <h2>Ingredient Search</h2> 
     <input type="text" [ngFormControl]="term"/> 
     <ul> 
     <li *ngFor="#item of items | async">{{item}}</li> 
     </ul> 
    </div> 
    `, 
    providers: [IngredientService] 
}) 

export class IngredientSearch { 
    items: Observable<Array<string>>; 
    term = new Control(); 
    constructor(private ingredientService: IngredientService) { 
    console.log("About to call service"); 
    this.items = ingredientService.search(this.term.valueChanges); 
    } 
} 

Aktualisiert Code-Schnipsel.

rawSearch(term: string) { 
    this.getData = ([]); 
    this.http.get(this.endpoint_url + term) 
     .subscribe(
     res => { 
     this.getData = res.json(); 
     console.log(this.getData); 
     return this.getData; 
     }, 
     error => { 
     alert(error); 
     }); 
    return this.getData; 
    } 

Answer 1

Elemente sind nicht definiert, wenn die Ansicht gebunden ist - bevor der Dienst zurückkehrt. Initialisieren Sie Elemente in einem leeren Array. Oder verwenden Sie einen Observable-Wrapper und den Async-Operator in Ihrer Vorlage.