Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-bootstrap Typeahead selected object

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.

like image 892
Zbyněk Nevrlý Avatar asked Jul 27 '17 21:07

Zbyněk Nevrlý


1 Answers

There is inputFormatter for that.

like image 160
Zbyněk Nevrlý Avatar answered Sep 28 '22 08:09

Zbyněk Nevrlý