Question

我在菜单上附加了一个按钮，单击该按钮时背景为红色。

.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变量为true，则它将应用error CSS类，否则会看到CSS类。

Here是示例演示。

Answer 2

您想要的行为不是很清楚，但是据我了解，这就是您想要的？

<mat-list-item [class.seen]="seenMe" [class.error]="presses>2" class="list-item">
   <span class="message">
      I was here
   </span>
</mat-list-item>

TS

openMe(): boolean {
    this.presses++;
    return this.notSeenYet = false;
}

Stackblitz

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

2 个答案: