Angular或Typescript奇怪的行为

Question

我面临着一个非常奇怪的问题.为此目的,我准备了stackblitz 演示.

问题是什么:

1. 选择Filter Two从选择
2. 返回Filter One使用相同的选择器
3. Type在Filter One输入一些随机值,例如123
4. 按下Test 1按钮.

意外的行为是输入字段被清除.看看如何实现onTest1方法的实现,然后是如何onTest2实现方法.当您按下Test 2按钮然后输入Filter One保持,但查看onTest1和onTest2实现之间的差异.这只是顺序的差异.在test1值中设置为索引0处的过滤器,然后null设置为索引1处的过滤器.

在test2该null被索引1处设置过滤器,然后值被设置为在过滤器0.

有人可以解释这种奇怪的行为吗？我面临着更大的问题,这只是Stackoverflow帮助目的的冰山一角.目前我正在使用Angular 5.2.5,我正在使用Google Chrome 67.0.3396.99在Macbook OSX 10.12.6上进行测试.

Answer 1

您使用FormControl的方式并非预期,并且您已经暴露了副作用.

之所以在您选择Filter Two然后返回Filter One 之后出现错误的原因是因为这会导致输入订阅第二个FormControl而不取消订阅它所绑定的原始控件.

因此,在测试1中值变为空白的原因是因为首先将filter [0]设置为该值,然后更新input元素以显示该值,然后将filter [1]设置为null,然后输入元素为更新为显示null.

您应该更改代码以在输入上使用NgModel或按预期使用Reactive Forms.

进一步说明

我检查了GitHub,问题出在FormControlDirective中.当@input被更改时,它从shared调用setupControl,并在那里监听valueAccessor上的更改以更新视图.之所以出现这个问题是因为,据我所知,如果之前已设置了某个值,则无法调用某种拆卸方法.

替代方法

我不知道为什么你开始使用FormControl,但如果过滤器必须是FormControl类型,那么你可以做的最简单的事情如下.

<input matInput [ngModel]="selectedFilter.control.value" 
       [ngModelChange]="selectedFilter.control.setValue($event)" />