ngClass不适用于Angular 5

Question

您好我是用户角5,我想切换为我的soundcloud播放器更改播放< - >暂停图标.

这是我的TypeScript,后跟我的html.

我可以在我的控制台中看到我正确切换了playMode,但字体真棒图标并没有像预期的那样改变.

谢谢您的帮助.

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>

Answer 1

在类中取出通用表达式并将条件表达式放在ngClass指令中

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

在这里查看有关ngClass如何工作的深入解释？为什么你应该把共同的课程拿出来.

如果你正在使用icon类,也fas应该是class.fafont-awesome