Angular 或 Typescript 奇怪的行为答案

【问题标题】：Angular or Typescript strange behaviourAngular 或 Typescript 奇怪的行为
【发布时间】：2018-07-20 17:14:38
【问题描述】：

我面临着非常奇怪的问题。为此，我准备了 stackblitz 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 上进行测试。

【问题讨论】：

预期的行为是什么？当您在过滤器 2 上并单击测试 2 两次时，输入将被清除。
我不明白为什么在第 4 步之后输入字段 Filter One 被清除。我为它设置了与用户提供的相同的值，所以为什么它被清除了。
我在两个点击处理程序中都评论了this.filters[1].control.setValue(null);。现在它没有被清除。 :)
嘿，我知道。为什么当我在第二个过滤器上调用 setValue(null) 时它也会清除第一个过滤器？我创建了两个不同的 FormControl 实例 - 每个过滤器一个 - 那么为什么在第二个过滤器上设置空值也会清除第一个过滤器？我不明白这个。

标签： angular angular-material

【解决方案1】：

您以非预期的方式使用 FormControl，并且您已经暴露了副作用。

错误只出现在您选择过滤器二然后返回过滤器一之后的原因是因为这会导致输入订阅第二个 FormControl 而没有取消订阅它绑定的原始控件到。

所以在测试 1 中值变为空白的原因是因为首先将 filter[0] 设置为该值，然后更新输入元素以显示该值，然后将 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)" />

【讨论】：

所以丹尼尔你的意思是这是因为我正在做这样的事情[formControl]="someDynamicallyChangingFormControl"？
是的。我只看到[formControl] 在反应式表单的上下文中使用。你走出了人迹罕至的地方，遇到了一只臭鼬。不过有趣的问题。
还有其他方法可以让我从FormControl 的数组中选择不同的验证规则等并在一个输入元素上使用它吗？
应该有，但我对 Reactive Forms 做得还不够，无法给出最佳答案。也许 ngFor 每个过滤器并显示绑定到 FormControl 的输入。仅显示带有 *ngIf 的可见的，与所有过滤器的下拉值进行比较。想想应该不会有太大的不同。
您的调查真的很有帮助。我将尝试使用 *ngFor 重新组织模板。好主意顺便说一句...非常感谢