I have https://ng-bootstrap.github.io/#/components/typeahead/api component with folowing declaration:
<ng-template #rt let-r="result" let-t="term">
<span class="device">
<span class="grayout">{{r?.manufacturer.name}}</span> {{ r?.modelName}},
<span class="grayout"> {{ r?.year}}, {{r?.operatingSystemVersion.operatingSystem.name}} {{r?.operatingSystemVersion.name}}, {{ r?.note}} </span>
</span>
<span class="deviceStats">
<span class="grayout">{{r?.blockedCount}}x blocked</span>
</span>
</ng-template>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
[inputFormatter]="formatter" placeholder="Search model, manufacturer, operating system, operation system version, serial number, code etc." />
And component code:
export class HomeComponent implements OnInit {
account: Account;
modalRef: NgbModalRef;
userReservations: Reservation[];
model: Device;
searching = false;
searchFailed = false;
search = (text$: Observable<string>) =>
_do.call(
switchMap.call(
_do.call(
distinctUntilChanged.call(
debounceTime.call(text$, 300)),
() => this.searching = true),
term =>
_catch.call(
_do.call(this.deviceService.search(term), () => this.searchFailed = false),
() => {
this.searchFailed = true;
return of.call([]);
}
)
),
() => this.searching = false);
So basically json response contains Device[]. List with suggested options works correctly because template is used and there I can access properties but when I select some option in input there is [object Object] value. Is possible to populate e.g. toString() method from Device object?
Thank you.
There is inputFormatter for that.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With