提前进行ng-bootstrap:如何处理Observable< Person []&gt ;；而不是Observable< string []> [英] ng-bootstrap typeahead: how to handle Observable<Person[]> rather than Observable<string[]>

问题描述

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

I've a newbie Angular/Typescript question.

我遵循了 ng-bootstrap typeahead 并且我决定将Wikipedia调用替换为提供以下GET调用的自定义REST服务:

I followed the Wikipedia example defined in ng-bootstrap typeahead and I decided to replace the Wikipedia call with a custom REST service that provides the following GET call:

• 获取/person/name/{name}

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

and returns a list of persons matching the name, where each person is:

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

现在，如果我将人员数组映射到_service中的名称字符串数组，那么从打字稿部分和角度部分来说，一切都可以正常工作

Now from the typescript part and the angular part everything works fine if I map(...) the array of persons to an array of string of names into the _service:

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

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

But I'd like to don't map that way in the _service and returns the list of persons to allow the user to click on the result in the dropdown and then display the detail of the person without subsequent calls.

因此，目前在我的打字稿组件中，模型为:

So at the moment in my typescript component, the model is:

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>

如何在下拉菜单中仅显示姓名，并允许用户单击姓名并向其显示相应的人?

How can I show just the names in the dropdown and allow the user to click on the name and show him the corresponding person?

推荐答案

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

You need a resultFormatter which will show the name, but you also need inputFormatter to show just the name when you choose a value, otherwise it will show [object Object] in the input field. These both are provided by the typeahead.

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

So in your ts, mark that you want to show the name in both results and in input:

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

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

and you will use these in template like so:

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

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

Your model will still contain the whole object.

这篇关于提前进行ng-bootstrap:如何处理Observable< Person []&gt ;；而不是Observable< string []>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！