ngClass无法正常工作Angular 5 [英] ngClass doesn't work Angular 5

问题描述

您好，我是用户angular 5，我想切换以更改"Soundcloud"播放器的播放<->暂停"图标.

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

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

here is my TypeScript followed by my html.

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

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.

感谢您的帮助.

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>

推荐答案

感谢Santosh Singh和Pankaj Parkar的帮助！您的回答帮助我找到了最终答案.

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

在这里.

我在index.html中更改了这一行:

I changed this line in my index.html :

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

根据Santosh Singh的《 Plunker》中提出的建议:

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

当然，我将"fas"类更改为"fa"，以使其能够与超棒的4.7.0版本一起使用.就像帕克所说:

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>

也许一开始我没有从font-awesome导入正确的v5参考. Nvm，现在可以正常工作.

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

谢谢大家！

这篇关于ngClass无法正常工作Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！