* ngIf добавляет элементы вместо их замены

Question

Мой код

<i *ngIf="!isFollowing" class="far fa-bell"></i>
<i *ngIf="isFollowing" class="fas fa-bell"></i>

Тип isFollowing: Boolean

Всякий раз, когда я изменяю его на true или false, он показывает новый элемент в соответствии с выражением, но не удаляетпредыдущий элемент, но добавление нового элемента в DOM.В результате несколько значков видны, как на изображении.

Добавлено несколько значков

Я считаю, что обнаружение изменений обнаруживает изменение и добавляет новый элемент DOM, ноон не обновляет предыдущий элемент DOM.

Answer 1

Попробуйте это

<i [ngClass]="{'far': !isFollowing, 'fas': isFollowing}"  class="fa-bell"> <i>

Answer 2

Почему бы вам не сделать это с ngClass?

<i [ngClass]="{'fas fa-bell': isFollowing == true, 'far fa-bell': isFollowing == false}"></i>

Answer 3

Попробуйте с

<i *ngIf="!isFollowing; else follow" class="far fa-bell"></i>
<ng-template #follow><i class="fas fa-bell"></i></ng-template>