要在Angular Material的mat-select组件中显示已选颜色,可以通过自定义模板来实现。下面是一个示例解决方法:
在HTML模板中,使用mat-select组件,并定义一个自定义模板来显示已选颜色。在mat-select中使用ng-template来指定自定义模板,并使用mat-select-trigger来显示已选颜色。
{{color}}
在CSS样式中,定义.selected-color类来控制已选颜色的显示样式。
.selected-color {
width: 20px;
height: 20px;
border-radius: 50%;
}
在组件的Typescript代码中,定义一个colors数组来存储可选颜色,并初始化selectedColor变量来存储已选颜色的值。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
colors = ['红色', '蓝色', '绿色', '黄色'];
selectedColor: string;
}
这样,当用户选择一个颜色时,已选颜色将以一个小圆圈的形式显示在mat-select组件中。
希望这个示例能帮到你!
上一篇:Angular Material: `<mat-option>`与异步数据不兼容。
下一篇:Angular Material按钮和RxJS fromEvent函数 - 没有nativeElement属性,只有_nativeElement属性。