Material 按钮切换与模型不同步

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"];
      }
    }
  }

因此，当我切换按钮编号为 2 的按钮时，应切换编号为 1 的按钮。

你可以看到：

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

Material 按钮切换与模型不同步

Material Button Toggle is not sync with model

togglebutton

angular-material

angular