कोणीय 2: TypeError: अपरिभाषित

Question

की संपत्ति 'प्रतीक (प्रतीक.इटरेटर)' नहीं पढ़ सकता है, मैं क्रिस्टोफ बर्गडोर्फ़ के Observables in Angular2 blog के मूलभूत पूर्ण पूर्ण भिन्नता के साथ अवलोकन करने और प्रयोग करने के लिए नया हूं। इस कोड चल रहा है पैदा करता है:

अपवाद: लेखन त्रुटि: जारी करने के बाकी ingredientservice में फोन करने के ... rawsearch के बाद अपरिभाषित

की संपत्ति 'प्रतीक (Symbol.iterator)' नहीं पढ़ सकता। चेतावनी भी एक [ऑब्जेक्ट ऑब्जेक्ट] संदेश के साथ पॉप। मैंने सत्यापित किया है कि एंडपॉइंट ठीक चल रहा है।

इस पर डीबग करने के तरीके पर कोई भी सिफारिश की सराहना की जाएगी।

ingredientservice.ts टेक्स्ट स्ट्रिंग पर बदलाव की प्रतीक्षा करता है, इसे अस्वीकार करता है और अंतराल से स्वत: पूर्ण मिलान प्राप्त करने के लिए एक आरईएसटी कॉल करता है।

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

सेवा वापस आने से पहले दृश्य को बाधित होने पर आइटम को अपरिभाषित किया जाता है। वस्तुओं को एक खाली सरणी में शुरू करें। या अपने टेम्पलेट में एक अवलोकननीय रैपर और async ऑपरेटर का उपयोग करें।