限制 Angular Button Toggle Group 中的可选按钮

【问题标题】：Limit selectable Buttons in Angular Button Toggle Group限制 Angular Button Toggle Group 中的可选按钮
【发布时间】：2019-01-24 15:07:28
【问题描述】：

Angular Material Button Toggle Group 可以设置为multiple，然后从0到组中的所有按钮都可以选择。有没有办法强制必须选择至少一个按钮并设置最大选定按钮（如果限制为 2 并且用户选择第三个按钮，则第一个选定按钮应更改为未选择）。是否可以通过mat-button-toggle-group 实现这一目标？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您必须使用组的属性“值”。在 change 方法中，使用引用变量传递整个“组”。

例如

    <mat-button-toggle-group #group="matButtonToggleGroup" 
                   multiple=true (change)="change(group)">
      <mat-button-toggle *ngFor="let value of [1,2,3,4,5]" [value]="value">
        <mat-icon>format_align_left</mat-icon>
      </mat-button-toggle>
    </mat-button-toggle-group>
    <div class="example-selected-value">Selected value: {{group.value}}</div>

  max:number=2;
  change(group:any)
  {
     //group.value is an array with the elements selected
     if (group.value.length>this.max)
     {
        let newValue=group.value;
        newValue.shift();
        group.value=newValue;     
     }
  }

见stackblitz

【讨论】：