Question

我正在使用ng-bootstrap.github.io的结果示例模板。

这完全没问题。我用它来表示用户以表格形式输入城市。

问题在于编辑用户详细信息。我不确定如何为该用户填充以前保存的城市。这就是我在HTML中的含义：

<template #rt let-r="result" let-t="term">
    {{ r.name}}
</template>
<input (blur)="lostFocus($event)" class="form-control" formControlName="city_obj" type="text" [(ngModel)]="typeaheadModel" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem) = "selectItem($event)">

这是来自组件：

search = (text$: Observable<string>) =>
text$
.debounceTime(200)
.map(term => term === '' ? []
    : this.cities.filter(v => new RegExp(term, 'gi').test(v.name)).slice(0, 10));
formatter = (x: {name: string}) => x.name;

我使用模型驱动的表格。

在数据库中，我只保存用户的城市ID，因为城市在单独的表中。

因此，在表单构建器中，我有city_id字段和city_obj。

API只会保存city_id并忽略city_obj。

我使用selectItem事件在组件中设置city_id字段。

那么，如何设置先前保存的城市以进行输入并保持预先输入功能？

Answer 1

自己发现。

我只需要将相同的对象设置为表单控件，但是在debounceTime之后。

编辑：由于很久以前，我不知道这是不是正确的做法。由于对此有很多兴趣，我找到了我用它的项目。这是我当时设置的预先输入值，它运行良好：

this.form.controls['city_obj'].setValue({id:this.formData.city.id, name:this.formData.city.name});

如何为Angular 2 ng-bootstrap设置typeahead默认/初始值？

1 个答案: