ngClass 不工作 Angular 5

Question

您好，我是用户 angular 5，我想为我的 soundcloud 播放器切换播放 <-> 暂停图标。

这是我的 TypeScript，然后是我的 html。

我可以在我的控制台中看到我正确地切换了播放模式，但超赞字体图标并没有像预期的那样改变。

感谢您的帮助。

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

在class中取出普通表达式，在ngClass指令中放入条件表达式

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

在此处 Deep explanation 查看 ngClass 的工作原理？以及为什么要去掉常见的 classes。

另外 fas 应该是 fa class，如果你使用 font-awesome 图标 class。

Answer 2

将普通 class 放在 ngClass 之外。查看以下演示的工作 plnkr

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

DEMO

Answer 3

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

在这里。

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

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

根据 Santosh Singh 的 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">

当然，我将 class "fas" 更改为 "fa" 以使其与 font-awesome 4.7.0 版本一起正常工作。正如帕卡所说：

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

也许我一开始没有从 font-awesome 导入正确的 v5 参考。 Nvm，现在可以正常使用了。

谢谢大家！

Answer 4

我刚刚运行在使用 angular5 中的 fontawesome5 时遇到了同样的问题。问题是，每当 fontawesome 编译器找到带有 class="fa... something" 的标签时，它就会用 svg...something 标签替换它，因此您无法再引用初始标签并更改其 class.

我找到了一个非常糟糕但有效的问题解决方案。因此，由于您无法更改初始元素的 class 我只是从零开始重新创建元素并从 dom 中删除前一个使用 ngFor 指令的元素，如下所示：

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>

我不到一个月前就开始开发，所以代码不是最干净的，但我认为它适合你。

Answer 5

抱歉，信誉不足，无法回复显示您的解决方案的更新答案。对于它的价值，你可以吃蛋糕也可以吃。您不需要从 FA5 降级到 FA4.7。如果将用 link 替换为 4.7 css 的脚本标记替换为以下内容，它具有相同的效果但允许您访问 FA5 图标：

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

ngClass 不工作 Angular 5

ngClass doesn't work Angular 5

angular

font-awesome

ng-class

angular-template