如何为 Angular 2 ng-bootstrap 设置 typeahead default/initial 值？

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，因为城市是分开的 table。

所以，在表单生成器中我有 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});

Answer 2

像这样在 ngmodel 的构造函数或 ngOnInit 方法中设置数据。

constructor(){
   this.typeaheadModel = {
     name : "test name"
   }
}

如何为 Angular 2 ng-bootstrap 设置 typeahead default/initial 值？

How to set typeahead default/initial value for Angular 2 ng-bootstrap?

ng-bootstrap

angular