Angular2: TypeError: Невозможно прочитать свойство «Symbol (Symbol.iterator)» undefined

Question

Я новичок в наблюдаемых и экспериментируя с базовым вариантом автозаполнения Кристофа Бургдорфа Observables in Angular2 blog. Выполнение этого кода производит:

ИСКЛЮЧЕНИЕ: TypeError: Не удается прочитать свойство 'Символ (Symbol.iterator)' неопределенной

после выдачи REST получить заехать ingredientservice ... rawsearch. Предупреждение также появляется с сообщением [object Object]. Я проверил, что конечная точка работает нормально.

Любые рекомендации относительно того, как отладить это, были бы весьма признательны.

componentservice.ts ждет изменения в текстовой строке, отлаживает ее и выполняет вызов REST для получения совпадений автозаполнения от конечной точки.

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)); 
    } 
} 

для полноты я включил компонент ingredientsearch.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); 
    } 
} 

Обновленный фрагмент кода с рекомендуемым исправить.

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

Элементы не определены, когда представление привязано - до возврата службы. Инициализировать элементы в пустой массив. Или используйте обертки Observable и оператор async в вашем шаблоне.