ngclass изменить цвет при нажатии

Question

Я пытаюсь сделать любимым, когда кликаешь, он должен менять цвет, но он меняет цвет только при перезагрузке страницы. Мне нужно изменить его, когда я нажимаю без необходимости перезагрузки страницы. Это мой код и демо Stackblitz .

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>

Компонент

public flag: boolean = false;

GetFavourite(event){
    const userid = this.service.getUserId();
    console.log(userid, event)

      let requestData = {
        userId:userid,
        conferenceId:event,
        favourite:true
      }
      return this.http.favourite(requestData).subscribe(res =>{
        this.flag = this._conference['favourite'];
        console.log(this._conference['favourite']);
      })

  }

unfavourite(event){
    const userid = this.service.getUserId();
    let requestData = {
      userId:userid,
      conferenceId:event,
      favourite:false
    }
    return this.http.favourite(requestData).subscribe(res =>{
      this.flag = this._conference['favourite'];
      console.log(this._conference['favourite']);
    })
  }

CSS

.true{
    color: #FF4040;
}
.false{
    color: #000;
}

Answer 1

Сделайте код понятным с помощью условия ngClass, например:

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

и измените свойство hero.fav, связанное с каждым параметром, поэтому нет необходимости поддерживать одну локальную переменную для переключения кликов или классы.

HTML:

<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>

CSS:

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

Working_Demo

Answer 2

Некоторые скобки были добавлены, ваше состояние может быть неправильным

<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>