2

我正在尝试将 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))
    );
  }
}

货运服务.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 不是函数”

4

2 回答 2

1

下面工作！

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

货运服务.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 || { };
    }
}
于 2016-08-25T23:14:44.377 回答
1

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

同样的结果getMatchingProduct应该是一个 Observable 所以不需要Observable.of.

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

于 2016-08-23T17:30:12.047 回答