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

Question

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

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

• 获取 /person/name/{name}

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

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

现在从打字稿部分和角度部分，如果我将人员数组映射（...）到名称字符串数组到 _service 中，则一切正常：

• [p1, p2, p3] -> [nameP1, nameP2, ...]

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

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

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

您将在模板中使用它们，如下所示：

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

您的model遗嘱仍然包含整个对象。