Angular2:TypeError:无法读取未定义的属性'Symbol(Symbol.iterator)' [英] Angular2: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

问题描述

我是可观测对象的新手，正在尝试克里斯托夫·伯格多夫(Christoph Burgdorf)的

I'm new to observables and experimenting with an basic autocomplete variation of Christoph Burgdorf's Observables in Angular2 blog. Running this code produces:

例外:TypeError:无法读取未定义的属性'Symbol(Symbol.iterator)'

EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

在成分服务... rawsearch中调用.警报还会弹出并带有[object Object]消息.我已经验证了端点运行正常.

after issuing the REST get call in ingredientservice...rawsearch. The alert also pops with an [object Object] message. I've verified the endpoint is running fine.

任何有关如何调试它的建议将不胜感激.

Any recommendations on how to debug this would be greatly appreciated.

ingredientservice.ts 等待文本字符串的更改，将其反跳并执行REST调用以从端点获取自动完成匹配项.

ingredientservice.ts waits for a change on a text string, debounces it and performs a REST call to get autocomplete matches from an 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));
  }
}

出于完整性考虑，我包括了组件 ingredientsearch.ts

for completeness I have included the component 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);
  }
}

使用推荐的修复程序更新了代码段.

Updated code snippet with recommended fix.

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

推荐答案

绑定视图时-在服务返回之前，项未定义.将项目初始化为空数组.或在模板中使用Observable包装器和async运算符.

Items is undefined when the view is bound - before the service returns. Initialize items to an empty array. Or use an Observable wrapper and the async operator in your template.

这篇关于Angular2:TypeError:无法读取未定义的属性'Symbol(Symbol.iterator)'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！