ng-bootstrap typeahead: как обрабатывать Observable <Person []>, а не Observable <string []> - PullRequest
Новая
       13

ng-bootstrap typeahead: как обрабатывать Observable <Person []>, а не Observable <string []>

0 голосов
/ 08 сентября 2018

У меня новый вопрос по Angular / Typescript.

Я следовал примеру Wikipedia, определенному в ng-bootstrap typeahead , и я решил заменить вызов Wikipedia пользовательской службой REST, которая обеспечивает следующий вызов GET:

  • GET / персона / имя / {имя}

и возвращает список лиц, соответствующих имени, где каждый человек: 

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>

Как я могу показать только имена в выпадающем списке и позволить пользователю нажать на имя и показать ему соответствующее лицо?

1 Ответ

0 голосов
/ 08 сентября 2018

Вам нужно resultFormatter, которое будет отображать имя, но вам также нужно inputFormatter, чтобы отображать только имя при выборе значения, в противном случае в поле ввода будет отображаться [object Object]. Оба они предоставлены typeahead.

Итак, отметьте, что вы хотите, чтобы имя отображалось как в результатах, так и во вводе: 

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

и вы будете использовать их в шаблоне так: 

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

Ваш model по-прежнему будет содержать весь объект.

...