如何在单个选择列表中取消选择Angular材质列表选项?

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>

该列表的正常行为是当您单击该选项时选择该选项，并且一次只能选择一个选项。但是，我想添加一个行为，即该选项为"未选中"。当您再次单击它时(就像它在文档中显示的那样)。我已经摆弄了MatSelectionList,MatSelectionListChange和@ViewChild()，试图模拟这里和这里提出的解决方案，但到目前为止无济于事。我的问题是这些组件是否可行?(当然，任何解决方案都是非常受欢迎的:))或者不值得尝试改变组件的行为，也许宁愿从头开始，或者尝试引导?非常感谢!

Answer 1

正如你在Angular Material文档(https://material.angular.io/components/list/api)中看到的，mat-list-option有一个selected属性。

所以你可以玩它。当一个选项被点击时(你可以在每个选项上添加一个事件来捕捉事件)，你可以改变所选的属性。

,

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>