angular - ng-bootstrap typeahead : how to handle Observable<Person[]> rather than Observable<string[]>

Question

我有一个新手 Angular/Typescript 问题。

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

• 获取/person/name/{name}

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

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

现在，如果我将人员数组映射(...)到 _service 中的名称字符串数组，那么从 typescript 部分和 Angular 部分一切正常:

• [p1, p2, p3] -> [姓名P1, 姓名P2, ...]

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

所以目前在我的 typescript 组件中，模型是:

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] 在输入字段中。这些都是由 typeahead 提供的。

所以在你的 ts 中，标记你想要在结果和输入中显示名称:

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

您将像这样在模板中使用它们:

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

您的模型仍将包含整个对象。