angular - 我如何使用 typeahead 来获取/呈现对象，但接收并响应字符串？

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 事件方面走在了正确的轨道上。也许您只是没有完全理解正确的语法？

在输入定义中，您可能想要:

1. 删除 ngModel 引用
2. 将其替换为您希望在触发 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，它会根据需要将“模型”值设置为“阿拉巴马州”……您可能可以从那里拿走它来做任何您需要做的事情。希望对您有所帮助!