要实现Angular Mat列表的单选选项,你可以使用MatSelectionList组件和MatListOption组件。
首先,在你的组件中导入所需的模块和组件:
import { Component } from '@angular/core';
import { MatListOption } from '@angular/material/list';
然后,在模板中使用MatSelectionList组件和MatListOption组件创建单选列表。在MatListOption组件上使用MatSelectionList的属性[selected]来指定选中状态。当选中列表项时,通过调用MatSelectionList的select方法来更新选中状态。
{{ option.label }}
在组件类中,定义一个选项数组,并在初始化时设置默认选中项:
export class MyComponent {
options = [
{ label: 'Option 1', selected: false },
{ label: 'Option 2', selected: true },
{ label: 'Option 3', selected: false }
];
constructor() {}
selectOption(option: MatListOption) {
this.options.forEach(opt => {
if (opt !== option.value) {
opt.selected = false;
}
});
}
}
在这个示例中,初始时选中了第二个选项。当选择其他选项时,通过调用selectOption
方法来更新选中状态。
请确保在你的应用中导入了MatListModule
和MatIconModule
模块。