当项目具有BrowserAnimationsModule时，Angular UI未拾取数据模型更改

发布于02月01日

我的项目有一个页面来 Select 一个计划.在我将BrowserAnimationsModule添加到我的项目之前，它工作得很好.

该页面上有一个按钮"Change to Program A".无论您点击此按钮多少次，它都会正常工作.

但在此项目中添加BrowserAnimationsModule后，第二次点击时设置为"空程序".但数据模型已经设置为正确的程序，这是我打印在页面上的.

该页面本身没有使用BrowserAnimationsModule.这两个链接上的代码完全相同，只是其中一个链接在项目中有BrowserAnimationsModule.

我试过 firefox 和Edge，都有同样的问题.

我也试过Angular 12和15版本，都有同样的问题.

当前实现使用的是FormControl.我也try 了[(NgModel)]，也遇到了同样的问题.

这两个链接都有源代码映射，可以在源代码上进行调试. 请使用浏览器控制台查看它们.

我在BrowserAnimationsModule上看到有人提到a bug.但看起来它已经修好了.

你可以完全控制这个小项目on stackblitz

为什么？

您正在更新allProgramList，这会导致Angular 渲染引擎将更改应用于ngFor个差异.它发现数组已更改，并try 重新呈现它.首先，它从DOM中删除项，然后一个接一个地添加新项(由于错过了trackBy选项).

不同之处在于呼叫renderer.removeChild:

当使用BrowserAnimationsModule时，它使用BaseAnimationRenderer，它只标记要在转换后删除的项.

您可以在浏览器smth中看到如下内容:

默认情况下，Angular 使用DefaultDomRenderer2表示立即移除项目.

删除后，ANGLE会在<option>个标记中的每个标记上插入新 node 并注册内置的NgSelectOption指令，该指令也会基于_optionMap(由[ngValue]提供)更新<select>值，或者在没有提供_optionMap的情况下更新-1.

因此，这些操作结果会导致<select>个html元素的最终值错误.

推荐答案