Angular Material的button-toggle-group不能更新输入多个。
创始人
2024-10-19 22:30:14
0

在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);
    });
  }
}

这样,当用户选择或取消选择选项时,你就可以获得更新的多选值。

希望这个示例能帮助到你解决问题!

相关内容

热门资讯

透视教材!哈糖大菠萝万能挂,哈... 透视教材!哈糖大菠萝万能挂,哈糖大菠萝辅助器(透视)确实是有挂(哔哩哔哩)小薇(辅助器软件下载)致您...
透视大纲!wpk俱乐部有没有辅... 透视大纲!wpk俱乐部有没有辅助,wpk作必弊是真的吗(透视)其实真的有挂(哔哩哔哩)1、用户打开应...
透视指南!wpk安卓下载辅助,... 透视指南!wpk安卓下载辅助,wepoker智能辅助插件(透视)确实是真的挂(哔哩哔哩)1、很好的工...
透视讲义!菠萝辅助器免费版的功... 透视讲义!菠萝辅助器免费版的功能介绍,佛手大菠萝13道挂哪里(透视)一直真的有挂(哔哩哔哩)菠萝辅助...
透视资料!德扑圈透视,wepo... 透视资料!德扑圈透视,wepoker透视挂底牌(透视)确实存在有挂(哔哩哔哩)1、下载好wepoke...
透视要领!aapoker怎么设... 透视要领!aapoker怎么设置提高好牌几率,wejoker辅助器要钱玩吗(透视)切实是真的挂(哔哩...
透视技法!hhpoker德州牛... 透视技法!hhpoker德州牛仔视频,德州辅助工具到底怎么样(透视)好像是有挂(哔哩哔哩)一、德州辅...
透视积累!wepoker透视底... 透视积累!wepoker透视底牌脚本,德普之星透视辅助软件下载(透视)确实真的是有挂(哔哩哔哩)1、...
透视步骤!aapoker辅助软... 透视步骤!aapoker辅助软件合法吗,hhpoker透视脚本(透视)果然真的是有挂(哔哩哔哩)1、...
透视举措!hhpoker底牌透... 透视举措!hhpoker底牌透视脚本,德普之星有透视辅助吗(透视)都是真的是有挂(哔哩哔哩)1.德普...