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