Angular Material多选<mat-select>自动选中及获取选中值方法问询

我来帮你一步步搞定这个需求，刚好我之前用Angular Material的多选下拉做过类似的实现，下面分步骤给你讲清楚：

1. 基础配置：搭建多选mat-select与FormControl #

首先要确保你已经导入了必要的模块：ReactiveFormsModule（用于FormControl）和MatSelectModule（用于mat-select），在你的模块文件里添加：

import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

@NgModule({
  imports: [
    // ...其他模块
    ReactiveFormsModule,
    MatSelectModule,
    MatOptionModule
  ]
})
export class YourModule { }

然后在组件的TS文件里定义选项数组和FormControl：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 你的key-value选项数组
  toppingOptions = [
    { key: 1, value: 'extra cheese' },
    { key: 2, value: 'onion' },
    { key: 3, value: 'mushroom' },
    { key: 4, value: 'pepperoni' }
  ];

  // 初始化FormControl，这里可以设置默认选中的key数组（自动选中）
  selectedToppings = new FormControl([1, 3]); // 默认选中key为1和3的选项
}

对应的模板文件：

<mat-form-field appearance="fill">
  <mat-label>Select Toppings</mat-label>
  <mat-select [formControl]="selectedToppings" multiple>
    <mat-option *ngFor="let topping of toppingOptions" [value]="topping.key">
      {{ topping.value }}
    </mat-option>
  </mat-select>
</mat-form-field>

这里要注意：mat-select必须加上multiple属性才能开启多选，mat-option的[value]绑定的是选项的key，这样FormControl的值就是选中的key数组；如果你需要绑定整个对象，只需要把[value]改成[value]="topping"，同时初始化FormControl的时候传入对应的对象数组即可。

2. 实现选项自动选中 #

其实上面的代码已经包含了自动选中的逻辑：在初始化FormControl时，把你想要默认选中的选项的key（或对象）放到数组里作为初始值，比如new FormControl([1,3])，页面加载后就会自动选中key为1和3的选项。

如果是需要在组件生命周期中动态设置选中值（比如从接口获取数据后设置），可以用setValue()或patchValue()方法：

// 比如从接口拿到需要选中的key数组后
const fetchedSelectedKeys = [2,4];
this.selectedToppings.setValue(fetchedSelectedKeys);

3. 获取用户修改后的选中数组 #

有两种常用的方式获取用户修改后的选中值：

方式一：订阅FormControl的valueChanges事件 #

这种方式可以实时监听选中值的变化，适合需要实时处理的场景：

ngOnInit() {
  this.selectedToppings.valueChanges.subscribe(selectedKeys => {
    console.log('当前选中的key数组：', selectedKeys);
    // 在这里处理选中值的变化，比如提交到后端或更新其他数据
  });
}

方式二：直接访问FormControl的value属性 #

这种方式适合在特定时机（比如点击提交按钮）获取当前选中值：

onSubmit() {
  const currentSelected = this.selectedToppings.value;
  console.log('提交时的选中数组：', currentSelected);
  // 执行提交逻辑
}

对应的模板可以加一个按钮：

<button (click)="onSubmit()">提交选中项</button>

如果还有其他细节问题，比如选中值的格式处理，可以随时再问~

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