angular - matches.slice 不是一个函数 ng2-bootstrap typeahead

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

cargo .service.ts

我正在使用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 || { };
    }
}

typeahead-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 is not a function”

Answer 1

看起来您正在使用以下行将所有结果映射到 undefined:.map(error => console.log(error))。它不会捕获错误，它只会将所有值映射到 console.log() 的结果，该结果将是未定义的。

此外，getMatchingProduct 的结果应该是一个 Observable，因此不需要 Observable.of。

如果你想处理错误，可以尝试.catch方法。