ng 类的字体很棒的行为

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

所以现在发生了这种情况。

现在你可以看到，在这两种情况之间，我刚刚交换了 true false 值。所以我得出的结论是，我的旋转器不工作。但这件事发生了，

情况 3 )我再次给出了fa和fa-spinner。但我已经交换了和fa-paper-plane的位置，如下所示。fa-spinnerfa-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) 所以现在，在下面，您可以看到我已经交换了 true false 值。

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

好吧，这给了我这个输出。

多田。Spinner 也在工作。

从这四个条件可以看出，如果将旋转器和纸飞机放置在[ngClass] 指令中的第二个位置，则很明显它可以正常工作。

有人可以帮我解决吗？

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

Answer 1

当对象的键是单个类时，它似乎效果最好。

你可以这样做：

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

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