Angular2:类型错误:无法读取未定义的属性“Symbol(Symbol.iterator)”

2024-05-26

我是可观察对象的新手,正在尝试 Christoph Burgdorf 的基本自动完成变体Angular2 博客中的可观察量 http://blog.thoughtram.io/angular/2016/01/07/taking-advantage-of-observables-in-angular2-pt2.html。运行此代码会产生:

异常:类型错误:无法读取未定义的属性“Symbol(Symbol.iterator)”

在成分服务中发出 REST get 调用后...rawsearch。警报还会弹出并显示一条 [object Object] 消息。我已经验证端点运行良好。

任何有关如何调试此问题的建议将不胜感激。

成分服务.ts等待文本字符串的更改、对其进行反跳并执行 REST 调用以从端点获取自动完成匹配项。

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

为了完整起见,我已经包含了该组件成分搜索.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;
  }

当视图绑定时(服务返回之前),项目未定义。将项目初始化为空数组。或者在模板中使用 Observable 包装器和异步运算符。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2:类型错误:无法读取未定义的属性“Symbol(Symbol.iterator)” 的相关文章

随机推荐