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 。

ng-bootstrap预先输入所选对象

1 个答案: