如何防止 `MatListOption` 成为 checked/unchecked？

Question

设置：

Angular Material 8.1.4.

使用：

MatSelectionList 和 MatListOption

问题：

我需要显示用户无法 checked/unchecked 之前选择的几个项目，因此它们的行为就像 readonly。

出现问题的原因是 MatListOption 不支持 readonly 属性，这可以有效地解决我的问题。

设置(click)="$event.stopPropagation()"也不会阻止它被点击。

有什么想法吗？

谢谢！

PD。作为参考，我刚刚在 https://github.com/angular/components/issues/17141

创建了一个专长问题

ppd。我确实使用 disabled 进行了测试，但这会阻止将项目添加到最终列表中，这不是预期的行为。

Answer 1

通过添加额外的 (selectionChange)="selectedChanged($event)" 事件解决了问题，定义为：

selectedChanged($event: MatSelectionListChange) {
    if ($event.option.value.isChecked) {
      $event.option.selected = true;
    }
  }

isChecked 这是我用来区分所选选项的业务过滤器，通过发出 $event.option.selected = true; 项目保持选中状态，这是预期的行为。

Answer 2

是的，如果条件匹配，您可以阻止 mat 选项 checked/unchecked。

<mat-selection-list (selectionChange)="onChange($event)" >
    <mat-list-option  *ngFor="let data of dataList" [value]="data" >
        <h3>{{data}}</h3>
    </mat-list-option>
</mat-selection-list>

onChange(event: any) {
    if(condition === false){
        event.option.selected = false;
    }
}

如何防止 `MatListOption` 成为 checked/unchecked？

How prevent `MatListOption` to be checked/unchecked?

list

readonly

angular-material

angular