如何防止“MatListOption”被选中/取消选中？答案

【问题标题】：How prevent `MatListOption` to be checked/unchecked?如何防止“MatListOption”被选中/取消选中？
【发布时间】：2019-09-19 03:16:55
【问题描述】：

设置：

Angular 材质 8.1.4.

使用：

MatSelectionList 和 MatListOption

问题：

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

问题在于MatListOption 不支持readonly 属性，这可以有效地解决我的问题。

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

有什么想法吗？

谢谢！

pd。作为参考，我刚刚在https://github.com/angular/components/issues/17141创建了一个专长问题

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

【问题讨论】：

我还是不明白，您可以以编程方式选择元素以选择值，即使它们被禁用，用作选中并且用户无法选中或取消选中它们。
我在这里选择了香肠和番茄，番茄是禁用的垫子选项，所以用户不能选中取消选中，但程序员可以。这不是你想要的吗？ stackblitz.com/edit/angular-69ivya
感谢您的评论。这会检查该项目，但结果是相同的，因为它们被禁用，它们无法到达form.value。我正在使用select=true 以声明的方式实现相同的效果。
我在看的是一种让它们始终被选中的方法，因此用户无法取消选中它们，但这些项目会进入form.value 调用。
另外，请注意我在这里使用的不是mat-select，而是mat-selection-list和mat-list-option，它们会生成一个复选框列表。

标签： angular list angular-material readonly

【解决方案1】：

是的，如果条件匹配，您可以防止 mat 选项被选中/取消选中。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：