我在 mat-menu 上附加了一个按钮,点击后背景为红色。
工作 stackblitz
.list-item.error {
background-color:#FCE8FF;
}
但是我想在按钮被点击超过两次后改变颜色:
list-item.seen {
background-color: lightgray;
opacity: .5;
}
这些是可以驱动该功能的两个类:
[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;
}
最佳答案
如果我理解正确的话:
使用ngClass
HTML:
[ngClass]="notSeenYet ? 'error' : 'seen'"
CSS:
.error{
// Other CSS
background-color: red;
}
.seen{
// Other CSS
background-color: gray;
}
因此,如果 notSeenYet
变量为真,那么它将应用 error
CSS 类,否则会看到 CSS 类。
Here
是一个示例演示。
关于javascript - 阅读后更改消息的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56170107/