javascript - 阅读后更改消息的背景颜色

Question

我在 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;
  }

Answer 1

如果我理解正确的话:

使用ngClass

HTML:

[ngClass]="notSeenYet ? 'error' : 'seen'" 

CSS:

.error{
  // Other CSS
  background-color: red;
}

.seen{
  // Other CSS
  background-color: gray;
}

因此，如果 notSeenYet 变量为真，那么它将应用 error CSS 类，否则会看到 CSS 类。

Here是一个示例演示。