2016-03-29 56 views
7

Sono nuovo per osservabili e sperimentando una variazione di base autocomplete di Christoph Burgdorf Observables in Angular2 blog. L'esecuzione di questo codice produce:Angular2: TypeError: Impossibile leggere la proprietà 'Symbol (Symbol.iterator)' di indefinito

ECCEZIONE: TypeError: Impossibile leggere la proprietà 'Simbolo (Symbol.iterator)' undefined

dopo il rilascio del REST ottenere chiamare ingredientservice ... rawsearch. L'avviso appare anche con un messaggio [Oggetto oggetto]. Ho verificato che l'endpoint funziona correttamente.

Qualsiasi suggerimento su come eseguire il debug di questo sarebbe molto apprezzato.

ingredientservice.ts attende una modifica di una stringa di testo, la esegue al riavvio ed esegue una chiamata REST per ottenere corrispondenze di completamento automatico da un endpoint.

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

per completezza ho incluso la componente 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); 
    } 
} 

frammento di codice Aggiornato con fix consigliato.

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

risposta

11

Gli elementi non sono definiti quando la vista è vincolata, prima che il servizio ritorni. Inizializza elementi in un array vuoto. Oppure usa un wrapper Observable e l'operatore asincrono nel tuo template.

+0

ci proverò, tuttavia dovrei notare il servizio smart, codice componente stupido nel link al blog Observables in Angular2 che ho fornito sopra funziona perfettamente. –

+0

Beh, non posso commentare perché non ho esaminato l'esempio in dettaglio, ma so che ho corretto quell'errore prima di usare quel principio. Buona fortuna amico. – KnowHoper

+0

Questo ha risolto il tuo problema? – KnowHoper

Problemi correlati