我如何使用 typeahead 来 fetch/present 对象，但接收并响应字符串？

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>

当您搜索“Alabama”时，模型不会变成 Alabama，而是

{
  "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 使用这些模组，它根据需要将 "model" 值设置为 "Alabama" ...你可以从那里拿走它来做你需要做的任何事情.希望对您有所帮助！

我如何使用 typeahead 来 fetch/present 对象，但接收并响应字符串？

How can I use typeahead to fetch/present objects but take in and respond with strings?

ng-bootstrap

angular

angular-reactive-forms