Angular *ngIf正在添加元素，而不是替换它们

我的代码

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

isFollowing的类型为布尔型

每当我将其更改为true或false时，它都会根据表达式显示新元素，但它不是删除以前的元素，而是向DOM添加新元素。 因此，可以看到多个图标，如图中所示

我相信更改检测是检测更改并添加新的DOM元素，但它不会更新以前的DOM元素。

尝试使用

尝试使用

试试这个

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

试试这个

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

---

为什么不使用

ngClass

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

---

为什么不使用

ngClass

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

应该做与OPs代码完全相同的事情。如果问题在于更改检测和其中一个

*ngIf

性能不佳，否。

ng模板

依赖于第一个

*ngIf

的条件：代码从两个条件变为一个条件。问题在于更改检测，而不是两个

ngIf

指令，因此您的代码仍然无法解决问题，只是隐藏了它。你说的ngIf是什么意思“表现不好”？那没有发生。我没有说它发生了，OP说第一个DOM元素没有被删除。我太怀疑了，我只是在这件事上给了我两分钱（并且对

ngClass

的答案投了更高的票，因为我觉得它更合适）。没有真正的帮助。执行与*ngIf相同的操作，即添加到DOM，但不删除上一个。我相信这个问题比语法更为根深蒂固。这应该和OPs代码做的事情完全一样。如果问题在于变化检测和其中一个

*ngIf

表现不佳，否。

ng模板

依赖于第一个

*ngIf

的条件：代码从两个条件变为一个条件。问题在于更改检测，而不是两个

ngIf

指令，因此您的代码仍然无法解决问题，只是隐藏了它。你说的ngIf是什么意思“表现不好”？那没有发生。我没有说它发生了，OP说第一个DOM元素没有被删除。我太怀疑了，我只是在这件事上给了我两分钱（并且对

ngClass

的答案投了更高的票，因为我觉得它更合适）。没有真正的帮助。执行与*ngIf相同的操作，即添加到DOM，但不删除上一个。我相信这个问题比语法更为根深蒂固。

我本来打算接受这个答案的，因为这本应该有效，但它没有。即使布尔值更改，图标仍保持不变。我相信问题出在其他一些东西上，它正在破坏页面，因此是变化检测的问题。我本打算接受这个答案，因为这本应该有效，但它没有。即使布尔值更改，图标仍保持不变。我相信问题出在其他东西上，它正在破坏页面，因此是变化检测的问题。