mat-autocomplete选中mat-option时如何传递所选对象的多个属性值

你不需要修改后端接口，直接调整Angular Material自动补全组件的绑定逻辑就能拿到选中项的全量属性，步骤如下：

• 第一步：修改mat-option的value绑定规则，不要只绑定单个codeFileType属性，直接把整个选项对象作为绑定值传入。
• 第二步：给mat-autocomplete标签添加[displayWith]配置，指定选中后输入框的显示规则，避免输入框渲染出[object Object]的异常内容。
• 第三步：调整选中事件的处理逻辑，直接从返回的选中值对象里提取你需要的3个字段即可。

具体代码调整 #

1. 模板部分修改 #

<!-- 给mat-autocomplete增加displayWith和选中事件绑定 -->
<mat-autocomplete 
  [displayWith]="displayOptionText"
  (optionSelected)="handleSelect($event)">
  <!-- 原有mat-option调整value绑定，传入整个对象 -->
  <mat-option
    *ngFor="let values of filteredResults$ | async; trackBy: trackByFn; index as i"
    [value]="values"
    [innerHtml]="buildLabelFromValuesChecked(values, isOptionSelected(values))">
  </mat-option>
</mat-autocomplete>

2. TS逻辑部分补充/调整 #

import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';

// 控制选中后输入框的显示文本，对应你配置的_labelKey
displayOptionText = (option: Record<string, any>): string => {
  if (!option) return '';
  // 按照你之前的配置，labelKey对应的值是code，所以这里取code字段展示
  return option[tableConfig?.labelKey] ?? '';
}

// 选中项处理逻辑
handleSelect(event: MatAutocompleteSelectedEvent) {
  const selectedRow = event.option.value;
  // 直接从完整对象里提取你需要的三个字段，不需要额外接口传值
  const {
    codeFileType,
    myAutoCompleteHook,
    myAutoCompleteParams
  } = selectedRow;

  // 这里直接把三个字段传给入库逻辑即可
  this.saveDataToDB({
    codeFileType,
    myAutoCompleteHook,
    myAutoCompleteParams
  })
}

注意点 #

你之前写的isOptionSelected方法之前接收的是单个属性值，现在入参变成了完整选项对象，只需要把内部判断逻辑调整为从对象里取对应属性比对即可，比如原来判断val === currentSelectedVal，改成option?.codeFileType === currentSelectedCodeFileType就行，trackByFn如果是按唯一属性跟踪，也对应调整取属性的逻辑就可以正常工作。

这种绑定完整对象的方式是Angular Material官方推荐的用法，不会影响自动补全的过滤、选中、显示功能，不需要修改现有后端接口。

内容的提问来源于stack exchange，提问作者js-newb