我试图输出一个侧边栏菜单，该菜单通过一个包含fonts.googleaplos.com图标名的对象进行迭代（*ngfor）。我希望图标以黑色背景显示为白色，当我单击它们时，将其反转（白色背景，黑色图标颜色）。单击图标时，高亮显示（背景变为白色）有效，但图标颜色不变。是否有办法单独更改选定的图标颜色？我试图更改所选图标的id，但似乎无法覆盖id=“白色图标”。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
selectedIndex: number;
icons: any[] = [
{
"name": "home"
},
{
"name": "question_answer"
},
{
"name": "videocam"
},
{
"name": "description"
},
{
"name": "event"
},
{
"name": "check_circle"
}
];
public setRow(_index: number) {
this.selectedIndex = _index;
}
constructor() { }
ngOnInit(): void {
}
}.mat-sidenav-container {
position: fixed;
height: 70%;
width: 64px;
}
.mat-sidenav{
background-color: rgb(87, 87, 146);
}
# white-icon {
color: white;
}
.highlight {
background-color: white;
color: black;
}<head>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>
<mat-sidenav-container>
<mat-sidenav mode="side" opened="true">
<!-- sidenav content -->
<mat-nav-list>
<div >
<a *ngFor="let icon of icons; let i = index;" (click)="setRow(i)" [ngClass]="{'highlight': selectedIndex === i}" mat-list-item >
<mat-icon mat-list-icon class="material-icons-round">{{ icon.name }}</mat-icon>
</a>
</div>
</mat-nav-list>
</mat-sidenav>
暂无答案！
目前还没有任何答案，快来回答吧！