从Json中提取ng-bootstrap type的数据提前

Question

试图使Play Framework（REST）和ng-bootstrap - Typeahead一起工作。但是，我正在从提取来自json响应的数据中遇到问题。比如我写 “测试”（在数据库中搜索由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<Equipment[]> { 
    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<string>) => 
     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

<div class="form-group" [class.has-danger]="searchFailed"> 
 
    <input type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="search" /> 
 
    <span *ngIf="searching">searching...</span> 
 
    <div class="form-control-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div> 
 
</div>

我怎么能提取JSON对象的数据？请提供任何建议。

Answer 1

当您使用typeahead的对象时，您需要使用[inputFormatter]和[resultFormatter]输入。对于inputFormatter和resultFormatter，您传递的函数会从您的选择或结果列表中获取对象，并输出要为该对象显示的文本值。

新增功能组件：

@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<string>) => 
     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); 
} 

传递函数预输入输入

<div class="form-group" [class.has-danger]="searchFailed"> 
    <input type="text" class="form-control" 
     [(ngModel)]="model" [ngbTypeahead]="search" 
     placeholder="search" 
     [resultFormatter]="formatMatches" 
     [inputFormatter]="formatMatches" /> 
    <span *ngIf="searching">searching...</span> 
    <div class="form-control-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div> 
</div>