如何在mat-select中新增选项并将其设置为选中值？

你可以按照以下步骤操作即可实现需求：

• 第一步：在组件ts文件中构造符合列表项结构的新增选项对象，要和ListOfSelect中原有元素的字段保持一致（你的代码里用到了code作为绑定值、description作为展示文本，所以新增对象也要包含这两个字段）
• 第二步：把新增的选项对象追加到ListOfSelect数组中，推荐使用扩展运算符生成新数组触发Angular变更检测，避免直接push后列表不刷新的问题
• 第三步：给绑定的表单控件myList赋值为新增选项的code属性值，mat-select会自动匹配到对应选项设为选中状态

代码示例 #

// 假设你当前的表单组定义为myForm
const newOption = {
  code: 'new_opt_001', // 自定义新增选项的编码值
  description: '我是新增的选项' // 自定义下拉列表展示的文本
}

// 追加到源数组，生成新数组触发变更检测
this.ListOfSelect = [...this.ListOfSelect, newOption]

// 设置表单控件值为新增选项的code，自动匹配选中
this.myForm.get('myList')?.setValue(newOption.code)

注意：你已引入ngx-mat-select-search和自定义过滤管道，不需要额外修改搜索逻辑，新增的选项会自动被纳入过滤范围

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