angular - ng-bootstrap 预先输入选定的对象

Question

我有 https://ng-bootstrap.github.io/#/components/typeahead/api具有以下声明的组件:

<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." />

和组件代码:

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);

所以基本上 json 响应包含 Device[]。带有建议选项的列表工作正常，因为使用了模板，我可以在那里访问属性，但是当我在输入中选择某个选项时，有 [object Object] 值。 可以填充例如来自 Device 对象的 toString() 方法？

谢谢你。

Answer 1

有 inputFormatter 。