ngClass doesn't work Angular 5

问题

Hello I am user angular 5 and I want to toggle change a Play <-> Pause icon for my soundcloud player.

here is my TypeScript followed by my html.

I can see in my console that I toggle correctly the playMode but the font awesome icon doesn't change as it is suppose to do.

Thanks for the help.

import { Ng2DeviceService } from 'ng2-device-detector';
import { Component, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';
import './soundcloud-script.js';

@Component({
  selector: 'app-sc-player',
  templateUrl: './sc-player.component.html',
  styleUrls: ['./sc-player.component.css']
})
export class ScPlayerComponent{
  playMode: boolean;

  constructor(private deviceService: Ng2DeviceService) 
  {
    this.playMode = true;
  }

toggleIcon(){
  this.playMode = !this.playMode;
  console.log(this.playMode);
}

}

          <span id="play" 
          (click)="toggleIcon()">
          <i [ngClass]="{'fas fa-pause positionPlay': !playMode, 'fas fa-play positionPlay': playMode}"></i>
          </span>

回答1:

Take out common expression in class and put conditional expression in ngClass directive

<i class="fa positionPlay" 
  [ngClass]="{'fa-pause': !playMode, 'fa-play': playMode}"
></i>

check here Deep explanation about how ngClass works? and why you should take out common classes out.

Also fas should be fa class, if you're using font-awesome icon class.

回答2:

I've just run into the same problem working with fontawesome5 in angular5. The problem is that whenever the fontawesome compiler find a tag with a class="fa... something" it substitute it with a svg...something tag, so you can no more reference to the initial tag and change its class.

I found a solution for the problem that is pretty horrible but it works. So, since You cannot change the class of the initial element I just recreated the element from zero and deleted from the dom the previous one using ngFor directive like that:

export class FavoriteComponent implements OnInit {

  isFavorite: boolean;
  classes: string[]

  constructor() { }

  ngOnInit() {
    this.isFavorite = false;
    this.classes = ['far fa-star'];
  }

  onClick(){
    this.isFavorite = !this.isFavorite;
    this.classes = this.isFavorite ? ['fas fa-star'] : ['far fa-star'];
  }
}

<div (click)="onClick()" *ngFor="let class of classes">
  <i class={{class}}></i>
</div>

I've started developing no more than a month ago so the code is not the cleanest but I think it will work for You.

回答3:

Place common class outside ngClass. check out following working plnkr for demo

<span id="play" (click)="toggleIcon()">
        <i class="fa positionPlay" [ngClass]="{'fa-pause': !playMode, 'fa-play': playMode}"></i>
    </span>

DEMO

回答4:

Thanks to Santosh Singh and Pankaj Parkar for your help! Your answer helped me to find the final answer.

Here it is.

I changed this line in my index.html :

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script> 

By the line proposed in the Santosh Singh's Plunker:

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Of course, I changed the class "fas" by "fa" to make it works properly with the font-awesome 4.7.0 version. Like Parkar said:

<i class="fa positionPlay" 
  [ngClass]="{'fa-pause': !playMode, 'fa-play': playMode}"
></i>

Perhaps I didn't import the right v5 reference from font-awesome at the beginning. Nvm, it works fine now.

Thanks you all!

回答5:

Sorry, not enough reputation to reply to your updated answer showing your solution. For what it's worth, you can have your cake and eat it too. You don't need to downgrade from FA5 to FA4.7. If you replace that script tag that you replaced with the link to 4.7 css with the following, it has the same effect but allows you access to FA5 icons:

<link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

来源：https://stackoverflow.com/questions/48132518/ngclass-doesnt-work-angular-5