尝试让Play Framework(REST)和{{link1:
但是视图看起来像这样:
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<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-typeahead-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);
}
typeahead-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对象中提取数据?有什么建议吗?