如何在Angular mat-select选项中添加可编辑的Input输入框

问题说明 #

使用Angular的mat-select组件实现多选技术选择下拉列表，为每个mat-option添加版本输入框后，点击输入框会直接触发选项选中，无法激活输入框进行编辑。

下拉列表状态 #

• 收起状态：显示提示文本“Choisissez les technologies parmi cette liste”的表单输入框，右侧带有下拉箭头
• 展开状态：下拉列表中每个技术选项后方都带有一个占位符为“Version”的输入框
• 触发问题的操作：点击选项后方的输入框区域时，会直接选中对应选项，无法进入输入框编辑状态

当前代码 #

<mat-form-field appearance="fill">
   <mat-label>Choisissez les technologies parmi cette liste</mat-label>
   <mat-select formControlName="listeTechnologies" multiple> 
      <mat-option *ngFor="let item of listeDeroulanteTechnologies" [value]="item.code1">
         {{ item.valeur1}} 
         <input type="text" placeholder="Version"/>
      </mat-option>
   </mat-select> 
</mat-form-field>

解决思路 #

1. 阻止输入框点击事件冒泡 #

mat-option会监听内部所有点击事件来触发选中状态，因此需要阻止输入框的点击事件向上传递到mat-option：

<input type="text" placeholder="Version" (click)="$event.stopPropagation()"/>

添加(click)="$event.stopPropagation()"后，点击输入框时只会激活输入框，不会触发选项选中。

2. 绑定版本数据（可选） #

如果需要保存每个技术的版本信息，建议给listeDeroulanteTechnologies中的每个项添加version属性，通过双向绑定关联输入框：

<input type="text" placeholder="Version" (click)="$event.stopPropagation()" [(ngModel)]="item.version"/>

注意需要在对应模块中导入FormsModule以使用ngModel。

3. 表单数据整合（可选） #

若需要在提交表单时同时传递技术编码和版本信息，可以修改mat-option的value为包含编码和版本的对象：

<mat-option *ngFor="let item of listeDeroulanteTechnologies" [value]="{code: item.code1, version: item.version}">
   {{ item.valeur1}} 
   <input type="text" placeholder="Version" (click)="$event.stopPropagation()" [(ngModel)]="item.version"/>
</mat-option>

这样表单控件listeTechnologies的值会是包含技术编码和对应版本的对象数组，方便后续提交处理。

内容的提问来源于stack exchange，提问作者Maxime Dousselaere