使用ng类的字体可怕行为

Question

所以我的代码是角版本5。

我有一个有图标的按钮。我正在努力使图标充满活力。所以我想在发送图标fa fa-paper-plane和加载图标fa fa-spinner fa-spin之间进行转换。当我发送消息时，我应该显示旋转器，当我得到消息时，我应该显示纸面图标。

案例1)我给了fa、fa-spinner和fa-paper-plane，它们都不起作用。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': true, 'fa fa-paper-plane': false }" aria-hidden="true" title="send"></i>
  </button>
</div>

这是下面的输出，我得到一个方形图标，而不是旋转器。

​

​

案例2)在这个例子中，我给出了fa以及fa-spinner fa-spin和fa-paper-plane

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-spinner fa-spin': false, 'fa fa-paper-plane': true }" aria-hidden="true" title="send"></i>
  </button>
</div> 

所以现在这种事发生了。

​

​

所以现在你可以看到，在这两种情况下，我刚刚交换了真正的假值。所以我得出一个结论，我的旋转器不起作用。但这件事发生了

案例3)我再次给出了fa与fa-spinner和fa-paper-plane。但我已经互换了fa-spinner和fa-paper-plane的位置，如下所示。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': true, 'fa fa-spinner fa-spin': false }" aria-hidden="true" title="send"></i>
  </button>
</div> 

但这是输出，在那里，我再次得到一个盒子，而不是纸飞机，这次(我认为这是好的)。

​

​

现在，在下面，您可以看到，我已经交换了真正的假值。

<div class="send">
  <button type="submit" class="message-submit" id="btn-submit" (click)="onSubmit()">
    <i [ngClass]="{ 'fa fa-paper-plane': false, 'fa fa-spinner fa-spin': true }" aria-hidden="true" title="send"></i>
  </button>
</div> 

这个给了我这个输出。

​

​

塔达。旋转器也起作用了。

从这四个条件可以看出，如果将旋转平面和纸平面放置在第二位置中，那么很明显，旋转平面和纸平面都在正常工作。

有人能帮我修理一下吗？

PS:是的，我没有使用true和false (我有一个标志变量)

Answer 1

当对象的键是单个类时，它似乎工作得最好。

相反，您可以这样做：

class="fa" [ngClass]="{'fa-paper-plane': true, 'fa-spinner': false, 'fa-spin': false }"

因为fa类应该始终应用，所以它是在一个普通的class属性中完成的

Answer 2

当计算表达式为true时，在ngClass中传递的类被添加到元素的classList中，当表达式被计算为false时，在ngClass中传递的类将从元素的classList中删除。例子：

<div>
  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin': false, 'fa fa-telegram-plane': false}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i> </i> -->

  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin test test1234': true, 'fa fa-telegram test test1234' : false}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa-spinner fa-spin"> </i> -->


  <p>
    <i [ngClass]="{'fa fa-spinner fa-spin': false, 'fa fa-telegram': true}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa fa-telegram"> </i> -->

  <p>
    <i [ngClass]="{'fa fa-telegram test test1234': false, 'fa fa-spinner fa-spin test test1234': true}"> </i>
    Random Text
  </p>

  <!-- DOM will have   <i class="fa fa-spinner fa-spin test test1234"> </i> -->

</div>

示例代码：https://stackblitz.com/edit/angular-ngclass-kmherp?file=app%2Fapp.component.html