如何在mat-grid中使用mat-button-toggle-group实现单组切换按钮

你遇到的问题很常见——mat-button-toggle-group需要直接包含mat-button-toggle元素才能识别同组，但你的每个按钮都被mat-grid-tile隔开了，直接包裹整个grid自然无效。不过别担心，我们可以通过给每个按钮设置相同的group属性来实现同组切换，不需要把它们放在同一个mat-button-toggle-group标签里。

修改后的代码示例 #

<mat-grid-list cols="11" rowHeight="40px">
  <mat-grid-tile>
    <label>Label 1</label>
  </mat-grid-tile>
  <!-- 给每个mat-button-toggle设置相同的group属性 -->
  <mat-grid-tile colspan='2'>
    <mat-button-toggle group="actionGroup">Button 1</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile colspan='2'>
    <mat-button-toggle group="actionGroup">Button 2</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile colspan='2'>
    <mat-button-toggle group="actionGroup">Button 3</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile colspan='2'>
    <mat-button-toggle group="actionGroup">Button 4</mat-button-toggle>
  </mat-grid-tile>
  <mat-grid-tile colspan='2'>
    <mat-button-toggle group="actionGroup">Button 5</mat-button-toggle>
  </mat-grid-tile>
</mat-grid-list>

额外说明 #

1. 绑定选中值：如果需要获取或设置选中的按钮，可以结合ngModel或表单控件使用：

   <mat-button-toggle group="actionGroup" [(ngModel)]="selectedAction">Button 1</mat-button-toggle>
   

   在组件类中定义selectedAction变量即可同步选中状态。

2. 多选模式：如果需要允许选中多个按钮，只需给每个按钮添加multiple属性：

   <mat-button-toggle group="actionGroup" multiple>Button 1</mat-button-toggle>
   

3. 修复拼写错误：你原来的代码里有个小错误——</mat-gri-tile>应该是</mat-grid-tile>，记得修正避免渲染报错。

这样设置后，分散在不同grid tile里的按钮就会成为同一切换组，实现你想要的单选/多选切换效果啦！

内容的提问来源于stack exchange，提问作者Abdu Manas C A