Question

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

我遵循了ng-bootstrap typeahead中定义的Wikipedia示例，并决定用提供以下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] 。这些都是由预输入提供的。

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

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

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

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

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

提前进行ng-bootstrap：如何处理Observable <person []>而不是Observable <string []>

1 个答案: