Angular2: TypeError: no se puede leer la propiedad 'Symbol (Symbol.iterator)' de undefined
Soy nuevo en observables y estoy experimentando con una variación básica de autocompletar de Christoph BurgdorfObservables en el blog Angular2. Ejecutar este código produce:
EXCEPCIÓN: TypeError: no se puede leer la propiedad 'Symbol (Symbol.iterator)' de undefined
después de emitir el REST obtener llamada en el servicio de ingredientes ... rawsearch. La alerta también aparece con un mensaje [objeto objeto]. Verifiqué que el punto final funciona bien.
Cualquier recomendación sobre cómo depurar esto sería muy apreciada.
ingredienteservice.ts espera un cambio en una cadena de texto, lo elimina y realiza una llamada REST para obtener coincidencias de autocompletado desde un punto final.
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));
}
}
para completar he incluido el componenteingredientesearch.ts
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);
}
}
Fragmento de código actualizado con la corrección recomendada.
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;
}