Angular 有棱角或打字的奇怪行为

我面临着一个非常奇怪的问题。我为此准备了stackblitz

问题是：

从选择器中选择过滤两个

使用相同的选择器返回到“筛选一个”

输入

Filter One

输入一些随机值，例如

123

按

测试1

按钮

意外的行为是输入字段被清除。看一看实现

onTest1

方法是如何实现的，然后看

onTest2

方法是如何实现的。当您按下

test2

按钮时，来自

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上进行测试。

您使用FormControl的方式并非出于预期，而且您暴露了一个副作用

该错误仅在您选择Filter Two并返回Filter One后出现的原因是，这会导致输入订阅第二个FormControl，而不会取消订阅它绑定到的原始控件

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

您应该更改代码，以便在输入上使用NgModel，或者按照预期使用被动表单

进一步解释

我在GitHub中进行了检查，问题出现在FormControlDirective中。当@input被更改时，它会从shared调用setupControl，并在其中侦听valueAccessor上的更改以提取视图。问题的出现是因为，据我所知，如果之前已经设置了一个值，那么在任何地方都不会调用某种类型的拆卸方法

替代方法

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

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

预期的行为是什么？当您在filter 2上并单击test 2两次时，输入被清除。我不明白为什么在步骤4之后输入字段

filter One

被清除。我正在为它设置与用户提供的值相同的值，因此它被清除的原因。我对this.filters[1].control.setValue（null）进行了注释

在两个单击处理程序中。现在它还没有被清除。：）我知道。为什么当我在第二个过滤器上调用
setValue（null）
时，它也会清除第一个过滤器？我创建了两个不同的FormControl，每个过滤器一个，所以为什么在第二个过滤器上设置null值也会清除第一个过滤器？我不明白。丹尼尔，你的意思是，这是因为我在做这样的事情，比如“someDynamicallyChangingFormControl”

？是的。我只见过在被动表单上下文中使用的

[formControl]

。你离开了人迹罕至的道路，遇到了臭鼬。有趣的问题。有没有其他方法可以让我从具有不同验证规则的

FormControl

数组中进行选择，并将其用于一个输入元素？应该有，但我对反应式表单做得不够，无法给出最佳答案。可以为每个筛选器指定一个值，并显示绑定到FormControl的输入。仅显示带有*ngIf的可见过滤器，并与所有过滤器下拉列表的值进行比较。想起来应该没什么不同。你的调查真的很有帮助。我将尝试使用*ngFor重新组织模板。好主意，顺便说一句。。。谢谢