如何在单选列表中取消选择 Angular Material 列表选项？

Question

我是 Angular/Angular Material 的初学者，我遇到了以下问题。我有一个带有单选列表和几个选项的选择列表的模板：

<mat-selection-list [multiple]="false">
  <mat-list-option>Option 1</mat-list-option>
  <mat-list-option>Option 2</mat-list-option>
  <mat-list-option>Option 3</mat-list-option>
</mat-selection-list>

该列表的正常行为是当您单击它时选择一个选项，并且一次只能选择一个选项。但是，我想添加当您再次单击该选项时“取消选择”该选项的行为（如 docs 中所示）。我摆弄了 MatSelectionList、MatSelectionListChange 和 @ViewChild()，试图模仿 and here 提出的解决方案，但到目前为止无济于事。那么我的问题是这些组件是否可行？（当然，任何解决方案都将非常受欢迎 :)）或者不值得尝试更改组件的行为，而是从头开始，或者尝试 bootstrap？非常感谢！

Answer 1

如您在 Angular Material 文档 (https://material.angular.io/components/list/api) 中所见，mat-list-option 已选择属性.

这样你就可以玩了。单击一个选项时（您可以在每个选项上添加一个事件以捕获该事件），然后更改所选的属性.

例如：

const options = [{
    label: 'Option 1',
    selected: false
  },
  {
    label: 'Option 2',
    selected: false
  }
]

optionWasClicked(optionClicked) {
  this.options.forEach((option) => option.selected = (optionClicked == option) ? true : false)
}

<mat-selection-list *ngFor="let option of options" [multiple]="false">
  <mat-list-option (click)="optionWasClicked(option)">{{ option.label }}</mat-list-option>
</mat-selection-list>

如何在单选列表中取消选择 Angular Material 列表选项？

How to unselect an Angular Material list-option in a selection-list with single selection?

javascript

data-binding

angular-material

angular