ng class 的字体真棒行为

Question

所以我的代码在 angular 版本 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-spinner 和 fa-paper-plane 给出了 fa。但是我已经互换了 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>

但这就是输出，这次我又得到了一个盒子而不是纸飞机（我认为它工作正常）。

情况 4) 所以现在，在下面，您可以看到我已经交换了真假值。

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

嗯，这给了我这个输出。

多田。微调器也在工作。

从这四个情况可以看出，如果放在Second Position中的Second Position中，很明显spinner和paper-plane是正常工作的ngClass] 指令。

有人可以帮我解决问题吗？

PS：是的，我没有使用 true 和 false（我有一个标志变量）

Answer 1

当对象的键是单个 class.

时，它似乎效果最好

您可以改为执行以下操作：

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

因为 fa class 应该始终适用，所以它是在正常的 class 属性中完成的

Answer 2

当表达式被评估为真时，传入 ngClass 的类被添加到元素的类列表中，当表达式被评估为假时，传入 ngClass 的类被从类列表中删除为元素。示例：

<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

ng class 的字体真棒行为

font awesome behavior with ng class

html

font-awesome

ng-class

angular