在Angular Material中,button-toggle-group是用来创建一个切换按钮组的组件。默认情况下,它只支持单选。如果你想要支持多选,你需要进行一些额外的设置。
下面是一个示例代码,展示了如何使用button-toggle-group来实现多选功能,并能够更新多个选择。
首先,确保你已经导入了必要的Angular Material模块和组件:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatButtonToggleGroup } from '@angular/material/button-toggle';
然后,在你的组件中定义一个FormControl来存储多选的值:
export class YourComponent {
toggleControl = new FormControl();
}
接下来,在组件的HTML模板中,使用button-toggle-group组件,并将FormControl绑定到ngModel:
Option 1
Option 2
Option 3
这里的关键是将多选的multiple属性设置为true。这样,你就可以选择多个选项。
最后,你可以在组件中订阅FormControl的值变化,并对其进行处理。例如,你可以在控制台输出选择的值:
export class YourComponent {
toggleControl = new FormControl();
ngOnInit() {
this.toggleControl.valueChanges.subscribe((values) => {
console.log('Selected values:', values);
});
}
}
这样,当用户选择或取消选择选项时,你就可以获得更新的多选值。
希望这个示例能帮助到你解决问题!