从Json中提取ng-bootstrap typeahead的数据

尝试制作Play Framework(REST)并ng-bootstrap - Typeahead一起工作.但我面临从json响应中提取数据的问题.例如我写"test"(在数据库中搜索name),服务器返回json数组(一切都正确):

[{
  "id": 1,
  "name": "test",
  "annotation": "test annotation",
  "kiMin": 1,
  "kiMax": 2,
  "cosFiMin": 3,
  "cosFiMax": 4
}, {
  "id": 4,
  "name": "test2",
  "annotation": "test annotation",
  "kiMin": 1,
  "kiMax": 2,
  "cosFiMin": 3,
  "cosFiMax": 4
}]

但视图看起来像这样:

这是我的代码:

http.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Equipment }           from './equipment';
import { Observable }     from 'rxjs/Observable';
@Injectable()
export class HttpService {
  private Url = "http://localhost:9000/find?term=";  // URL to web API
  constructor (private http: Http) {}
  search ( term :String ): Observable {
    return this.http.get(this.Url+term)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }
  private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

NGB-预输入,http.ts

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {HttpService} from './http.service';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';


@Component({
  selector: 'ngb-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [HttpService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbTypeaheadHttp {
  model: any;
  searching = false;
       searchFailed = false;

    constructor(private _service: HttpService) {}

    search = (text$: Observable) =>
      text$
        .debounceTime(300)
        .distinctUntilChanged()
        .do(() => this.searching = true)
  .switchMap(term =>
    this._service.search(term)
        .do(() => this.searchFailed = false)
        .catch(() => {
          this.searchFailed = true;
          return Observable.of([]);
        }))
  .do(() => this.searching = false);
  }

预输入,http.html

  
  searching...
  
Sorry, suggestions could not be loaded.

@Component({
  selector: 'ngb-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [HttpService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbTypeaheadHttp {
  model: any;
  searching = false;
  searchFailed = false;

    constructor(private _service: HttpService) {}
    // Added
    formatMatches = (value: any) => value.name || '';
    search = (text$: Observable) =>
      text$
        .debounceTime(300)
        .distinctUntilChanged()
        .do(() => this.searching = true)
    .switchMap(term =>
      this._service.search(term)
          .do(() => this.searchFailed = false)
          .catch(() => {
            this.searchFailed = true;
            return Observable.of([]);
          }))
    .do(() => this.searching = false);
}

    
    searching...
    
Sorry, suggestions could not be loaded.