使用ngx-bootstrap typeahead实现输入框显示名称提交对应ID

解决方案 #

1. 确认基础定义（你已经完成的部分可跳过）

先定义结构接口，将盲注数据源改为对象数组：

export interface Opt {
    blindId: number;
    name: string;
}

组件中声明对应变量，赋值时直接取完整对象：

blinds: Opt[] ;
ngOnInit(): void {
   this.blindStructureService.getBlindStructures().subscribe(response => {
       this.blinds = response.body["responseObject"];
   });
}

2. 修改输入框配置

去掉input上的[(ngModel)]（避免和响应式表单冲突），新增两个typeahead专属配置：

• [typeaheadOptionField]="'name'"：指定输入框和下拉列表默认展示的字段为name
• (typeaheadOnSelect)="onBlindSelect($event)"：监听选择事件，手动给表单控件赋值id
  修改后的输入框代码：

<input formControlName='blindStructure'
   placeholder="Search The Blind Structure" 
   [typeahead]="blinds" 
   autocomplete="off"
   [typeaheadMinLength]="0" 
   [optionsListTemplate]="customListTemplate"
   [typeaheadOptionField]="'name'"
   (typeaheadOnSelect)="onBlindSelect($event)"
   class="form-control blind">

3. 调整自定义下拉模板

将模板中展示项的绑定改为取name属性（你已经完成的部分可跳过）：

{{ match.item.name }}

4. 添加选择事件处理逻辑

首先从ngx-bootstrap导入类型定义：

import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';

在组件类中添加事件处理方法，选中时将盲注id赋值给表单控件：

onBlindSelect(event: TypeaheadMatch): void {
  this.mtctTemplateForm.get('blindStructure').setValue(event.item.blindId);
}

配置完成后，输入框会展示name给用户，表单控件实际存储的是blindId，提交时直接取表单的blindStructure值就是需要提交的id，和你页面上select下拉框的效果完全一致。

内容的提问来源于stack exchange，提问作者Subhendu Mahanta