Question

ng-bootstrap typeahead元素允许获取对象建议数组，然后选择一个以使模型成为选定对象。

The full code can be seen in this Plunkr。通过搜索美国州然后观察model输出来测试它。

以下是模板：

<label for="typeahead-template">Search for a state:</label>
<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
  [inputFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}</pre>

当你搜索＆＃34;阿拉巴马州＆＃34;该模型不会成为阿拉巴马州，而是

{
  "name": "Alabama",
  "flag": "5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png"
}

在我的情况下，我希望将模型设为Alabama。我不想以图像的形式将图像和其他数据发送回服务器。

我已尝试使用ng-bootstrap提供的(selectItem)事件，并手动更改其中的值，但这不起作用。模型保持不变 - 一个对象而不是一个字符串！

即

 selectItem(e: NgbTypeaheadSelectItemEvent, fubi: any ){
    console.log("e.item.name", e.item.name);
    this.addressForm.patchValue({
      statename: e.item.name
    });
  }

以这种方式调用时，我的表单statename属性未更新

任何想法为什么不呢？我相信，我已经尝试过所有明显的事情了。

Answer 1

看起来你正在使用selectItem事件走上正轨。也许你的语法不正确？

在输入定义中，您可能希望：

删除ngModel参考
用激活selectItem事件时要运行的函数的引用替换它（此函数可以适当地设置“model”...或者“statename”也许......无论你的船是什么漂浮）

<input id="typeahead-template" 
       type="text" 
       class="form-control" 
       (selectItem)="setModel($event)" 
       [ngbTypeahead]="search" 
       [resultTemplate]="rt"
       [inputFormatter]="formatter" />

然后，在你的typeahead-template.ts文件中，添加函数：

setModel(e: NgbTypeaheadSelectItemEvent, fubi: any) {
  this.model = e.item.name;
}

我forked your Plunkr使用这些mod，并根据需要将“模型”值设置为“Alabama”...您可以从那里采取它做任何您需要做的事情。希望有所帮助！

如何使用typeahead来获取/显示对象，但是接受并使用字符串进行响应？

1 个答案: