我有一个带有字段的组件,用户应该从数据库返回的项目列表中选择一个项目,而TypeAhead似乎是最佳UI选择。
在组件中,我有以下内容:
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/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';
import 'rxjs/add/operator/merge';
import 'rxjs/add/observable/throw';
和html:
<div class="form-group">
<label class="form-control-label" for="my_item">Item</label>
<div class="input-group">
<input id="typeahead-http" type="text" class="form-control"
[class.is-invalid]="searchFailed"
[(ngModel)]="my_item"
[ngbTypeahead]="searchMyItems" placeholder="My Item"
[ngModelOptions]="{standalone: true}"
[resultFormatter]="formatMatches"
[inputFormatter]="formatMatches"
/>
<span *ngIf="searching">searching...</span>
<div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
</div>
</div>
和
formatMatches = (value: any) => { (typeof value === 'object') ? value=value.id : value=value; return value};
searchMyItems = (text$: Observable<string>) =>
text$
.debounceTime(300)
.distinctUntilChanged()
.do(() => this.searching = true)
.switchMap(term =>
this.fetchTypeaheadItems(term)
.do(() => this.searchFailed = false)
.catch(() => {
this.searchFailed = true;
return of([]);
}))
.do(() => this.searching = false)
.merge(this.hideSearchingWhenUnsubscribed);
fetchTypeaheadItems(text): Observable<any> {
return this.dataSvc.getItems(text)
.map(response => response.json())
.map(response => {
console.log("response",response);
})
}
console.log显示正在调用该服务并返回由输入过滤的对象数组,因此键入的越多,返回的对象越少(匹配)。
问题是返回的值没有像我期望的那样显示在下拉列表中,而在早期版本中,所有显示的都是[object object],现在根本没有任何显示。
我无法弄清楚如何显示已过滤的对象列表,以便用户可以选择一个。
我想做的其他事情,因为值的起始提取可以返回非常大量的记录,直到用户输入了一些字符数,可能是2或3时才取回。
返回值列表数据如下所示:
(2) [{…}, {…}]
0 : id : 123456
name : "Westward Wind Talker"
1 : id : 125458
name : "Waldo Great Pepper"