Question

在某些情况下，我需要切换其他按钮而不是单击。观看演示： Demo

如您所见，我尝试通过以下方式做到这一点：

    onToggleGroupChange(event: MatButtonToggleChange) {
    const { value } = event;

    const products =
      event && value.length ? value.map(item => item.value) : undefined;

    if (products) {
      if (products.includes("TWO")) {
        this.selectedItems = ["ONE"];
      }
    }
  }

因此，当我切换按钮编号时，应该改为切换两个带有数字ONE的按钮。

您可以看到：

ng-reflect-checked="false"

但是样式没有更新，仍然可以切换。

我做错什么了吗？有什么方法可以实现我想要的？

Answer 1

好的，所以解决方法是更换：

   <mat-button-toggle-group
      [multiple]="true"
      (change)="onToggleGroupChange($event)"
    >

使用

   <mat-button-toggle-group
      [multiple]="true"
      (change)="onToggleGroupChange($event)"
      [value]="this.selectedItems"
    >

在提供值输入之前，

mat-button-toggle-group是不受控制的组件。两种方式的数据绑定不是基于mat-toggle-buttons的值，而是具有自己的模型。

解决方案：DEMO

材质按钮切换与模型不同步

1 个答案: