ng-bootstrap typeahead：如何处理 Observable<Person[]> 而不是 Observable<string[]>

Question

我有一个新手角度/打字稿问题。

我遵循了ng-bootstrap typeahead中定义的维基百科示例，并决定将维基百科调用替换为提供以下GET调用的自定义REST服务：

• 获取/person/name/{name}

并返回与姓名匹配的人员列表，其中每个人是：

Person(id:long, name:string, surname:string)

现在从打字稿部分和角度部分，如果我将人员数组映射到 _service 中，一切正常：

[p1， p2，

• p3] -> [名称P1， 名称P2， ...]

但是我不想在_service中以这种方式映射并返回人员列表以允许用户单击下拉列表中的结果，然后显示人员的详细信息而无需后续调用。

所以目前在我的打字稿组件中，模型是：

model: Observable<Person[]>;

搜索部分如下：

search = (text$: Observable<string>) =>
text$.pipe(
debounceTime(300),
distinctUntilChanged(),
tap(() => this.searching = true),
switchMap(term =>
this._service.search(term).pipe(
tap(() => this.searchFailed = false),
catchError(e => {
this.searchFailed = true;
return of([]);
}))
),
tap(() => this.searching = false),
merge(this.hideSearchingWhenUnsubscribed)
)

而 HTML 部分是：

<div class="input-group input-group-lg" id="person-search">
<input name="name" id="typeahead-http" type="text" class="form-control" [class.is-invalid]="searchFailed" (selectItem)="selectedItem($event)" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Search a person"/>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">
<i class="text-muted fa fa-search"></i>
</button>
</span>
<div>

如何仅显示下拉列表中的名称并允许用户单击名称并向他显示相应的人员？

Answer 1

您需要一个显示名称的resultFormatter，但您还需要inputFormatter在选择值时仅显示名称，否则它将在输入字段中显示[object Object]。这两者都由预选型提供。

因此，在您的ts中，标记您要在结果和输入中显示名称：

formatter = (x: { name: string }) => x.name;

您将在模板中使用这些，如下所示：

<input ... [resultFormatter]="formatter" [inputFormatter]="formatter"/>

您的model仍将包含整个对象。