Angular material 角度材质选择列表-禁用的选项可以通过键盘选择/取消选择

我有一个根据用户设置在init上禁用的项目列表。刚才有人向我指出，您可以通过键盘导航并选择/取消选择其他禁用的项目。见：

这是一个错误，还是我遗漏了什么

  <mat-selection-list required >
   <mat-list-option checkboxPosition="before">EU
   </mat-list-option>
   <mat-list-option checkboxPosition="before" disabled=“true”>US
   </mat-list-option>
   <mat-list-option checkboxPosition="before">CA
   </mat-list-option>
 </mat-selection-list>

欧盟
美国
加利福尼亚州

这看起来像一个bug，但这里有一个可能的解决方案-

组成部分

export class AppComponent implements AfterViewInit {
  version = VERSION;
  @ViewChild('selectionList') selectionList: MatSelectionList;

  ngAfterViewInit() {
    this.selectionList.selectionChange.subscribe((value: MatSelectionListChange) => {
      if (value.option.disabled) {
        value.option.selected = !value.option.selected;
      }
    })
  }
}

加价

<mat-selection-list required #selectionList>
   <mat-list-option checkboxPosition="before">EU
   </mat-list-option>
   <mat-list-option checkboxPosition="before" [disabled]="true">US
   </mat-list-option>
   <mat-list-option checkboxPosition="before">CA
   </mat-list-option>
</mat-selection-list>

欧盟
美国
加利福尼亚州

---

这样做的目的是将对禁用选项的任何更改切换回其原始值。请注意，

[disabled]

用于设置输入值。

经过数小时的思考，您很快就破解了它。看起来Material正在修复bug，所以这是一个令人高兴的消息。但是，既然现在这样做有效，我非常感谢你。