在 Angular 开发中，我们经常会使用 ngIf 指令来根据某些条件动态地添加或移除 DOM 元素。但是，在使用 ngIf 时，我们可能会遇到一个非常棘手的问题：在 ngIf 内部进行了数据改变，但是 UI 并没有相应地更新。
问题分析
这个问题的原因是因为 Angular 的变化检测机制。当我们通过代码更改了一个组件内部的属性时，Angular 会自动启动变化检测，检查组件中的所有绑定，并根据新值更新 DOM。但是，当我们在 ngIf 中使用一个绑定时，情况就变得有些复杂了。
考虑下面的代码片段：
<div *ngIf="show">
{{ message }}
</div>
<button (click)="updateMessage()">Update Message</button>这里有一个布尔型属性 show，用于控制 <div> 是否显示，还有一个字符串型属性 message，用于动态显示消息。当我们点击按钮时，会将 message 属性设置为一个新的随机字符串。然而，即使 message 值已经更新，UI 上的文本仍然保持不变。这是因为 ngIf 在判断条件时创建了一个新的模板视图，并且只有当条件从 false 变为 true 时才会插入到 DOM 中。在这种情况下，视图绑定只会在创建视图时进行一次，而不会在每次更改后重新计算。
为了解决这个问题，我们需要手动通知 Angular 更新视图。一种方法是使用 ChangeDetectorRef 来手动启动变化检测：
-- -------------------- ---- -------
------ - ---------- ----------------- - ---- ----------------
------------
--------- -----------
--------- -
---- -------------
-- ------- --
------
------- -------------------------------- ----------------
--
--
------ ----- ------------ -
---- - -----
------- - ------- --------
------------------- ---- ------------------ --
--------------- -
------------ - ----------------------------------------
-------------------------
-
-在 updateMessage() 方法中，我们首先更新了 message 属性，然后调用了 cdr.detectChanges() 方法来启动变化检测。这样，每当我们更新消息时，Angular 就会自动更新视图了。
总结
在使用 ngIf 时遇到绑定不更新的问题，可以通过手动启动变化检测来解决。只需要获取 ChangeDetectorRef 实例，然后在修改绑定值后调用 detectChanges() 方法即可。
希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31178