要避免在mat-selection-list组件中高亮边框,可以使用以下代码示例中的解决方法:
HTML代码:
{{ option }}
CSS代码:
.no-border {
border: none !important;
outline: none !important;
}
TypeScript代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
options = ['Option 1', 'Option 2', 'Option 3'];
selectedOptions: string[] = [];
constructor() { }
}
在上述代码中,我们使用了ngClass指令来动态地为mat-list-option元素添加一个no-border类。这个no-border类将会取消边框和轮廓的高亮效果。通过这种方式,只有当前选择的选项会显示边框,其他选项将不会显示边框。
请注意,我们还需要使用双向数据绑定(ngModel)将所选选项绑定到selectedOptions变量上,以便在组件中获取所选选项的值。