Angular 单击时更改颜色

我试图使最喜爱的，当点击它应该改变颜色，但它只改变颜色时，我重新加载页面。我需要它改变当我点击而不需要重新加载页面。这是我的代码和演示

HTML

<mat-icon *ngIf="conference.favourite === true" [ngClass]="{'true' : conference.favourite === true?'true' :  flag === true? true:false}"  (click)="unfavour(conference.conferenceId)">favorite</mat-icon>
<mat-icon *ngIf="conference.favourite === false" [ngClass]="{'false' : conference.favourite === false?'false' :  flag === false? false:true}"  (click)="passFavor(conference.conferenceId)">favorite</mat-icon>

CSS

---

添加了一些括号，您的条件可能不正确

最爱
最喜欢的

添加了一些括号，您的条件可能不正确

最爱
最喜欢的

使用ngClass条件明确代码，如：

[ngClass]="hero.fav ? 'primary' : 'secondary'"

并修改与每个选项关联的属性，这样就不需要维护一个局部变量来切换单击或类

HTML:

---

使用ngClass条件明确代码，如：

[ngClass]="hero.fav ? 'primary' : 'secondary'"

并修改与每个选项关联的属性，这样就不需要维护一个局部变量来切换单击或类

HTML:

---

它仍然需要重新加载才能更改颜色它仍然需要重新加载才能更改颜色您可以提供stackblitz演示吗？旁注：它的保留字如true/false不应用作类names@PrashantPimpale我提供了stackblitz演示，这是您想要的吗？-->谢谢你这么多的兄弟它的工作！！。。你能把它加进去吗？我可以接受，你能提供stackblitz演示吗？旁注：其保留字如true/false，不应作为类使用names@PrashantPimpale我提供了stackblitz演示，这是您想要的吗？-->谢谢你这么多的兄弟它的工作！！。。你能把它加进去吗？我可以接受

[ngClass]="hero.fav ? 'primary' : 'secondary'"

<ul>
  <li *ngFor="let hero of heroes" (click)="test(hero.fav = !hero.fav)">
    <div [ngClass]="hero.fav ? 'primary' : 'secondary'" (click)="test(hero.id)">{{ hero.name }}</div>
  </li>
</ul>

.primary {
  color: red;
}
.secondary {
  color: green;
}