классное поведение шрифта с классом 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> 

Но это был выход, где я снова получаю коробку вместо бумажной плоскости на этот раз (я думал, что это нормально работает).

Случай 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> 

И это дало мне такой вывод.

Тада.Spinner тоже работает.

Вы можете видеть из четырех условий, довольно ясно, что как spinner, так и плоскость бумаги работают должным образом, если он находится во Second Position inдиректива [ngClass].

Может кто-нибудь помочь мне с исправлением?

PS: Да, я не использую true и false (у меня есть переменная flag для этого)

Answer 1

Когда выражение оценивается как 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

Answer 2

Кажется, что лучше всего работает, когда ключом объекта является один класс.

Вместо этого вы можете сделать что-то вроде этого:

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

Поскольку класс fa должен всегда применяться,это делается в обычном атрибуте class