加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2:TypeError:无法读取未定义的属性’Symbol(Symbol.ite

发布时间:2020-12-17 07:17:26 所属栏目:安全 来源:网络整理
导读:我是观察者的新手,并尝试了Christoph Burgdorf的 Observables in Angular2 blog的基本自动完成变体.运行此代码可以产生: EXCEPTION:TypeError:无法读取未定义的属性’Symbol(Symbol.iterator)’ 在ingredientservice … rawsearch发出REST get调用之后.警
我是观察者的新手,并尝试了Christoph Burgdorf的 Observables in Angular2 blog的基本自动完成变体.运行此代码可以产生:

EXCEPTION:TypeError:无法读取未定义的属性’Symbol(Symbol.iterator)’

在ingredientservice … rawsearch发出REST get调用之后.警报还会弹出[object Object]消息.我已经验证了端点运行正常.

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

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

为了完整性,我已经包含了componentsearch.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包装器和异步操作符.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读