Angular2: TypeError: Không thể đọc thuộc tính 'Symbol (Symbol.iterator)' không xác định

Question

Tôi mới dùng để quan sát và thử nghiệm với biến thể tự động hoàn chỉnh cơ bản của số Observables in Angular2 blog của Christoph Burgdorf. Chạy mã này tạo ra:

EXCEPTION: Lỗi Loại: Không thể đọc thuộc 'Symbol (Symbol.iterator)' không xác định

sau khi phát hành REST được gọi trong ingredientservice ... rawsearch. Cảnh báo cũng xuất hiện với thông báo [đối tượng đối tượng]. Tôi đã xác minh điểm cuối đang chạy tốt.

Bất kỳ đề xuất nào về cách gỡ lỗi này sẽ được đánh giá rất nhiều.

ingredientservice.ts đợi thay đổi trên chuỗi văn bản, hủy bỏ nó và thực hiện cuộc gọi REST để nhận kết quả tự động hoàn tất từ ​​điểm cuối.

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

cho đầy đủ Tôi đã bao gồm các thành phần 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); 
    } 
} 

Cập nhật đoạn mã với đề nghị sửa chữa.

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

Các mục không xác định khi chế độ xem bị ràng buộc - trước khi dịch vụ trả về. Khởi tạo các mục vào một mảng trống. Hoặc sử dụng trình bao bọc có thể quan sát và toán tử async trong mẫu của bạn.