Angular 4中如何通过数组设置mat-select多选的默认选中项？

嘿，我之前在Angular里用mat-select多选的时候也踩过这个坑，其实搞定默认选中的关键就是让你的已选项和全量选项的匹配逻辑正确，我给你一步步说怎么弄：

首先，先确认你的模板配置是对的——mat-select必须开启multiple属性，并且绑定好选中值，同时每个mat-option的value要对应全量选项里的元素。比如你的模板可以改成这样：

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">
  <mat-select [(ngModel)]="checkedOptions" multiple>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

核心注意点：数据加载顺序与有效性 #

因为你的options和checkedOptions都是从数据库获取的，一定要确保全量选项options先加载完成，再给checkedOptions赋值——如果反过来，mat-select找不到对应的选项，就没法默认选中。

如果是用HttpClient异步获取数据，组件里可以这么写：

import { Component, OnInit } from '@angular/core';
import { YourDataService } from './your-data.service'; // 替换成你的数据服务

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  options: string[] = [];
  checkedOptions: string[] = [];

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    // 先拉取全量选项
    this.dataService.getFullOptions().subscribe(fullOptions => {
      this.options = fullOptions;
      // 全量选项加载完成后，再拉取已选项
      this.dataService.getCheckedOptions().subscribe(savedOptions => {
        // 这里最好过滤一下，确保已选项都在全量选项里，避免无效值
        this.checkedOptions = savedOptions.filter(item => this.options.includes(item));
      });
    });
  }
}

如果用响应式表单（FormControl） #

如果你的项目用的是响应式表单，那绑定方式换成formControl就行，逻辑是一样的：

模板：

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">
  <mat-select [formControl]="selectedOptionsControl" multiple>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

组件类：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  options: string[] = [];
  selectedOptionsControl = new FormControl([]);

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    this.dataService.getFullOptions().subscribe(fullOptions => {
      this.options = fullOptions;
      this.dataService.getCheckedOptions().subscribe(savedOptions => {
        const validOptions = savedOptions.filter(item => this.options.includes(item));
        this.selectedOptionsControl.setValue(validOptions);
      });
    });
  }
}

特殊情况：选项是对象而非字符串 #

如果你的options是对象数组（比如[{id: '1', name: 'o1'}, ...]），那光靠值匹配就不行了，得用compareWith函数告诉mat-select怎么判断两个选项相等：

模板里加[compareWith]="compareOptions"：

<mat-select [(ngModel)]="checkedOptions" multiple [compareWith]="compareOptions">
  <mat-option *ngFor="let option of options" [value]="option">
    {{ option.name }}
  </mat-option>
</mat-select>

组件类里定义匹配函数：

compareOptions(optionA: any, optionB: any): boolean {
  // 这里根据你的对象属性来判断，比如用id
  return optionA && optionB ? optionA.id === optionB.id : optionA === optionB;
}

这样配置完，只要你的checkedOptions里的元素在options中存在，mat-select就会自动默认选中这些选项啦！

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