I'm new to Angular/Typescript and have a question.
I recently tried out the example from Wikipedia in ng-bootstrap typeahead. Instead of using the Wikipedia call, I decided to use a custom REST service that has the following GET endpoint:
- GET /person/name/{name}
This endpoint returns a list of people matching the specified name, with each person having the structure:
Person(id:long, name:string, surname:string)
Currently, everything works fine when I map(...) the array of persons to an array of string names within the _service:
- [p1, p2, p3] -> [nameP1, nameP2, ...]
However, instead of mapping the names in the _service, I want to return the list of persons so that users can click on a result in the dropdown and see the person's details without making additional calls.
In my typescript component, the model is:
model: Observable<Person[]>;
The search function looks like this:
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)
)
And here is the HTML part:
<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 display only the names in the dropdown and allow users to click on a name to view the corresponding person?