角度材质垫按钮切换组数据绑定不工作

我目前在一个项目中遇到了一个mat按钮切换组的问题。切换组有三个选项。在某些情况下,其中一个选项是不可选择的( 在示例“opt2”中 ).我的客户要求该选项仍处于活动状态(尽管它是禁止的),但当单击时,会显示一个快餐店。到目前为止,一切都正常,但如果我点击opt2,按钮“禁止”将显示为所选选项,尽管属性“值”没有改变。数据绑定似乎丢失了。

https://stackblitz.com/edit/angular-ivy-zrzojr?file=src/app/toggle-group/toggle-group.component.ts

组成部分:

export class ToggleGroupComponent implements OnInit {
  value = 'opt3';

  constructor(private snackbar: MatSnackBar) {}

  ngOnInit() {}

  change(evt: any) {
    if (evt.value !== 'opt2') {
      this.value = evt.value;
    } else {
      this.snackbar.open(`option ${evt.value} is currently forbidden`, null, {
        duration: 500,
      });
    }
  }
}

模板:

<mat-button-toggle-group [value]="value" (change)="change($event)">
  <mat-button-toggle value="opt1">Opt1</mat-button-toggle>
  <mat-button-toggle value="opt2">Forbidden</mat-button-toggle>
  <mat-button-toggle value="opt3">Opt3</mat-button-toggle>
</mat-button-toggle-group>
<p>Curr value is {{ value }}</p>