Angular2:TypeError:无法读取未定义的属性“Symbol(Symbol.iterator)" [英] Angular2: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
问题描述
我是 observables 的新手,正在试验 Christoph Burgdorf 的 Angular2 博客中的观察值.运行此代码会产生:
例外:类型错误:无法读取未定义的属性 'Symbol(Symbol.iterator)'
在成分服务中发出 REST get 调用后...rawsearch.警报还会弹出 [object Object] 消息.我已验证端点运行良好.
关于如何调试的任何建议将不胜感激.
ingredientservice.ts 等待文本字符串的更改、去抖动并执行 REST 调用以从端点获取自动完成匹配.
import {Injectable} from 'angular2/core';从'angular2/http'导入{Http};从 'rxjs/Observable' 导入 {Observable};导入 'rxjs/add/operator/debounceTime';导入 'rxjs/add/operator/distinctUntilChanged';导入 'rxjs/add/operator/switchMap';导入 'rxjs/add/operator/map';@Injectable()导出类 IngredientService {endpoint_url: String = "http://localhost:5000/ingredient/";结果:Observable>;构造函数(私有http:Http){}搜索(条款:可观察的<字符串>,去抖动持续时间= 400){返回terms.debounceTime(debounceDuration).distinctUntilChanged().switchMap(term => this.rawSearch(term));}获取数据:对象[];原始搜索(术语:字符串){控制台日志(术语);this.http.get(this.endpoint_url + term).订阅(资源=>{this.getData = res.json();console.log(this.getData);返回 this.getData;},错误 =>警报(错误));}}
为了完整起见,我包含了 ingredientsearch.ts
组件import {Component} from 'angular2/core';从'angular2/common'导入{Control};从'./ingredientservice'导入{IngredientService};从 'rxjs/Observable' 导入 {Observable};@成分({选择器:'成分搜索',模板:`<div><h2>成分搜索</h2><input type="text" [ngFormControl]="term"/><ul><li *ngFor="#item of items | async">{{item}}</li>
`,提供者:[成分服务]})导出类 IngredientSearch {项目:可观察的<数组<字符串>>;term = new Control();构造函数(私有成分服务:成分服务){console.log("即将调用服务");this.items =成分服务.search(this.term.valueChanges);}}
使用推荐的修复更新了代码片段.
rawSearch(term: string) {this.getData = ([]);this.http.get(this.endpoint_url + term).订阅(资源=>{this.getData = res.json();console.log(this.getData);返回 this.getData;},错误 =>{警报(错误);});返回 this.getData;}
在绑定视图时 - 在服务返回之前未定义项.将 items 初始化为空数组.或者在模板中使用 Observable 包装器和异步运算符.
I'm new to observables and experimenting with an basic autocomplete variation of Christoph Burgdorf's Observables in Angular2 blog. Running this code produces:
EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
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 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));
}
}
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;
}
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屋!