matches.sliceは関数ではありませんng2-bootstrap先読み

Question

ng2-bootstrap TypeaheadをRESTバックエンドで使用しようとしています。

HTTPレスポンス

[{ 
    "productDescription": "MAIL MKTG NIKLES HIGHLIGHT TUBE", 
    "productNumber": "10667" 
}, { 
    "productDescription": "SIGHT GLASSES/VAC BREAKER BR 15MM BSP", 
    "productNumber": "100436" 
}, { 
    "productDescription": "SIGHT GLASSES/VAC BREAKER BR 15MM BSP", 
    "productNumber": "100438" 
}] 

app.component.ts

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

freight.service.ts

私は偽のREST応答にmocky.ioを使用しています。

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

先行入力-demo.html

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

私は本当にエラーで立ち往生しています "例外TypeError：matches.sliceは関数ではありません" あなたはすべての結果をマッピングしているように見えます

Answer 1

この行では定義されていません：.map(error => console.log(error))。それはエラーをキャッチしません、それは単に定義されていないconsole.log()の結果にすべての値をマップします。

また、getMatchingProductの結果はObservableであり、Observable.ofの必要はありません。

エラーを処理する場合は、.catchメソッドを試すことができます。

Answer 2

以下は機能しました！

app.component.ts

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

freight.service.ts

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