Angular 4 ng-Bootstrap TypeAhead不显示或选择对象值

时间:2018-03-05 19:10:08

标签: javascript angular typescript ng-bootstrap bootstrap-typeahead

我有一个带有字段的组件,用户应该从数据库返回的项目列表中选择一个项目,而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"

0 个答案:

没有答案