Question

我面临着一个非常奇怪的问题。为此，我准备了demo的堆叠闪电战。

问题是什么

从选择器中选择Filter Two
使用相同的选择器返回Filter One
键入Filter One，输入一些随机值，例如123
按下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，并且暴露了副作用。

在您选择“过滤器2”然后返回到“过滤器1”之后，该错误仅在之后出现的原因是，这导致输入订阅了第二个FormControl，而没有取消订阅绑定的原始控件

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

您应该更改代码以在输入上使用NgModel或按预期使用反应式表单。

进一步的说明

我在GitHub中进行了检查，问题出在FormControlDirective中。当@input更改时，它从shared调用setupControl，并在其中侦听valueAccessor上的更改以更新视图。问题来了，据我所知，如果已经预先设置了一个值，就没有地方调用某种拆解方法。

替代方法

我不知道为什么要使用FormControl，但是如果过滤器必须为FormControl类型，那么您可以做的最简单的事情如下。

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

Angular或Typescript奇怪的行为

1 个答案: