Angular matches.slice不是ng2引导类型的函数

我正在尝试将ng2引导程序Typeahead与REST后端一起使用

HTTP响应 app.component.ts

从“ng2引导/ng2引导”导入{TYPEAHEAD_指令}；
@组成部分({
选择器：“我的应用程序”，
指令：[TYPEAHEAD\u指令、CORE\u指令、FORM\u指令、Responsive\u FORM\u指令]，
templateUrl:'./app/typeahead demo.html'，
提供者：[HTTP_提供者，货运服务]
})
导出类TypeaheadDemoComponent{
public stateCtrl:FormControl=new-FormControl（）；
公共myForm:FormGroup=新FormGroup({
状态：this.stateCtrl
});
公共选择：字符串=“”；
公共数据源：可观察；
已选择公共异步：字符串=“”；
public typeaheadLoading:boolean=false；
public typeaheadNoResults:boolean=false；
公共建造商（私人货运服务：货运服务）{
this.dataSource=Observable.create（（observator:any）=>{
observer.next（this.asyncSelected）；
}).mergeMap（（）=>this.getStatesAsObservable（））；
}
public getStatesAsObservable（）：可观察{
可观测收益(
这是货运服务
.getMatchingProduct（this.asyncSelected）.map（错误=>console.log（错误））
);
}
}

货运服务 我使用mocky.io来伪造REST响应

import { Injectable } from '@angular/core';
import { Headers, Http, Response, URLSearchParams } from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class FreightService {

    constructor(private http: Http) {

    }

    getMatchingProduct(productKeyword: string): Observable <string> {

        return this.http.get("http://www.mocky.io/v2/57b6988e0f0000b8020b7996")
            .map(this.extractData);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }
}

从'@angular/core'导入{Injectable}；
从“@angular/Http”导入{Headers，Http，Response，URLSearchParams}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
出口级货运服务{
构造函数（专用http:http）{
}
getMatchingProduct（productKeyword:string）：可观察{
返回此.http.get（“http://www.mocky.io/v2/57b6988e0f0000b8020b7996")
.map（此.data）；
}
私有数据（res:Response）{
让body=res.json（）；
返回body.data |{}；
}
}

typeahead-demo.html

异步结果
模型：{myForm.value.state | json}

---

我真的被错误“TypeError:matches.slice不是一个函数”所困扰。

看起来您正在使用以下行将所有结果映射到未定义：

.map（error=>console.log（error））

。它不会捕获错误，只会将所有值映射到

console.log（）

的结果，该结果将是未定义的

另外，来自

getMatchingProduct

的结果应该是可观察的，因此不需要

Observable.of

如果您想处理错误，可以尝试下面的

.catch

方法。

成功

app.component.ts 货运服务

@Injectable（）
出口级货运服务{
构造函数（专用http:http）{
}
getMatchingProduct（productKeyword:string）：可观察{
返回这个.http.get（“app/test”）.map（这个.extractData）；
}
私有数据（res:Response）{
让body=res.json（）；
返回体| |{}；
}
}

Adrian，谢谢你的回复。正如您所说，我更改了GetStatesObservable，如下所示，但仍然得到相同的错误。请帮忙！！public getStatesAsObservable（）：Observable{返回this.freightService.getMatchingProduct（this.asyncSelected）.map（（product）=>this.products=product）}您正在做完全相同的事情，但方式不同。无需将结果映射到任何对象（当然不必映射到未定义对象），流将保存结果。“this.products=product”的结果将是未定义的，因此您有相同的错误。你可以通过阅读来更好地理解操作符。我还建议你阅读一些关于反应式编程的内容。类似“”的内容肯定会有帮助。Adrian，谢谢链接。但任何提示，如何使这项工作将真正感谢。我在这方面浪费了很多时间：（Adrian，我在下面尝试过，但仍然是相同的错误：公共构造函数（private-freightService:freightService）{this.dataSource=Observable.create（（observer:any）=>{this.freightService.getMatchingProduct（this.asyncSelected）.订阅（（result:any）=>{observer.next（result）；}） }); }

import {TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
  templateUrl: './app/typeahead-demo.html',
  providers: [HTTP_PROVIDERS, FreightService]
})
export class TypeaheadDemoComponent {
  public stateCtrl:FormControl = new FormControl();
  public myForm:FormGroup= new FormGroup({
    state: this.stateCtrl
  });

  public selected:string = '';
  public dataSource:Observable<any>;
  public asyncSelected:string = '';
  public typeaheadLoading:boolean = false;
  public typeaheadNoResults:boolean = false;

  public constructor(private freightService: FreightService) {
    this.dataSource = Observable.create((observer:any) => {
      observer.next(this.asyncSelected);
    }).mergeMap(() => this.getStatesAsObservable());
  }

  public getStatesAsObservable():Observable<any> {

    return Observable.of(
        this.freightService
            .getMatchingProduct(this.asyncSelected).map(error => console.log(error))
    );
  }
}

import { Injectable } from '@angular/core';
import { Headers, Http, Response, URLSearchParams } from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class FreightService {

    constructor(private http: Http) {

    }

    getMatchingProduct(productKeyword: string): Observable <string> {

        return this.http.get("http://www.mocky.io/v2/57b6988e0f0000b8020b7996")
            .map(this.extractData);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }
}

  <h4>Asynchronous results</h4>
  <pre class="card card-block card-header">Model: {{myForm.value.state | json}}</pre>
  <form [formGroup]="myForm">
    <input formControlName="state"
         [(ngModel)]="asyncSelected"
         [typeahead]="dataSource"
         (typeaheadLoading)="changeTypeaheadLoading($event)"
         (typeaheadNoResults)="changeTypeaheadNoResults($event)"
         (typeaheadOnSelect)="typeaheadOnSelect($event)"
         [typeaheadOptionsLimit]="7"
         [typeaheadOptionField]="'productDescription'"
         placeholder="Locations loaded with timeout"
         class="form-control">
  </form>

  public constructor(private freightService: FreightService) {
    this.dataSource = Observable.create((observer:any) => {
       this.freightService.getMatchingProduct(this.asyncSelected)
       .subscribe((result: any) => {
         observer.next(result);
       })
    });
  }

@Injectable()
export class FreightService {

    constructor(private http: Http) {

    }

    getMatchingProduct(productKeyword: string): Observable <any> {

        return this.http.get("app/test").map(this.extractData);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || { };
    }
}