我有一個按鈕連接到mat-menu,點擊時有紅色背景。工作stackblitz.list-item.error {
background-color:#FCE8FF;}但是,我想在點擊按鈕兩次以上后更改顏色:list-item.seen {
background-color: lightgray;
opacity: .5;}這些是可以驅(qū)動該功能的兩個類:[class.seen]="!seenMe" [class.error]="true"HTML:<button mat-icon-button(click)="openMe()"
[matMenuTriggerFor]="notify">
<mat-icon>
warning
</mat-icon> Click Me</button><mat-menu #notify="matMenu" class="mat-menu-notify">
<mat-dialog-content (click)="stayOpen($event);">
<mat-list >
<div >
<mat-list-item [class.seen]="!seenMe"
[class.error]="true"
class="list-item">
<span class="message">
I was here
</span>
</mat-list-item>
</div>
</mat-list>
</mat-dialog-content></mat-menu>TS:notSeenYet = true;
get seenMe(): boolean|undefined {
return this.notSeenYet;
console.log(this.notSeenYet);
}
openMe(): boolean{
return this.notSeenYet = false;
}
讀取后更改消息的背景顏色
皈依舞
2019-04-16 13:15:56