angular-material - Angular Material Selection List - 禁用的选项可以通过键盘选择/取消选择

Question

我有一个根据用户设置在初始化时被禁用的项目列表。刚刚有人向我指出，您可以通过键盘导航并选择/取消选择以其他方式禁用的项目。看 : https://stackblitz.com/edit/angular-material2-issue-m5gtdy

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

  <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>

Answer 1

它看起来像一个错误，但这里有一个可能的(hacky？)解决方案 - StackBlitz

组件

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] 用于设置 Input 值。