Angular mat-selection-list，如何使单个复选框选择类似于单选按钮? [英] Angular mat-selection-list, How to make single checkbox select similar to radio button?

问题描述

如何从mat-selection-list中选择单个复选框.类似于从一组值中接受一个值的单选按钮.

How to make single checkbox select from mat-selection-list. Similar to radio button which accepts one value from group of values.

推荐答案

Components >= 9.1.0

选择列表现在直接支持单一选择模式.将多个输入设置为 false 来启用它.

Selection list now supports a single selection mode directly. Enable it with the multiple input set to false.

<mat-selection-list [multiple]="false">...

组件<9.1.0

您必须在初始化时为组件引用的 selectedOptions 属性设置 SelectionModel.

You have to set SelectionModel for selectedOptions property of component reference on init.

@ViewChild(MatSelectionList, {static: true})
private selectionList: MatSelectionList;

ngOnInit() {
    this.selectionList.selectedOptions = new SelectionModel<MatListOption>(false);
}

MatSelectionList api

通过这种方式，您也可以定义最初选择的值.

This way you can define initially selected values too.

export declare class SelectionModel<T> {
    constructor(_multiple?: boolean, initiallySelectedValues?: T[], _emitChanges?: boolean);
}

GitHub api

这篇关于Angular mat-selection-list，如何使单个复选框选择类似于单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！