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

它看起来像个错误，但这是一个可能的解决方案-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]用于设置输入值。

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

1 个答案: