在Angular Material 7中,可以使用MatSelect组件实现多选功能,并且可以通过代码设置选中的值。下面是一个示例解决方法:
npm install @angular/material@7.3.3
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
@NgModule({
imports: [MatSelectModule, MatOptionModule],
// ...
})
export class YourModule { }
{{ option }}
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
// ...
})
export class YourComponent {
selectedValues = ['Option 1', 'Option 2']; // 初始选中的值
options = ['Option 1', 'Option 2', 'Option 3', 'Option 4']; // 所有选项
selectControl: FormControl;
constructor() {
this.selectControl = new FormControl(this.selectedValues);
}
}
setSelectedValues() {
this.selectControl.setValue(['Option 3', 'Option 4']);
}
这样,当点击按钮时,选中的值将被更新为"Option 3"和"Option 4"。
这就是使用Angular Material 7设置多选的方法。通过使用FormControl对象来管理选项的状态,我们可以方便地设置和更新选中的值。