Question

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

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

0 个答案: