代码之家  ›  专栏  ›  技术社区  ›  Marcin Kapusta

角度或字体奇怪的行为

  •  2
  • Marcin Kapusta  · 技术社区  · 8 年前

    我面临着非常奇怪的问题。我准备了斯塔克布里茨 demo 为此目的。

    问题是:

    1. 选择 Filter Two 从选择器
    2. 返回 Filter One 使用相同的选择器
    3. 键入 过滤器1 输入一些随机值,例如 123
    4. 出版社 Test 1 按钮。

    意外的行为是输入字段被清除。看看实现方法 onTest1 方法被实现,然后如何 onTest2 方法已实现。当你按下 Test 2 按钮,然后输入来自 过滤器1 留下来看看 内容1 和 内容2 实施。只是顺序不同而已。在 test1 该值设置为索引0处的筛选器,然后 null 设置为索引1处的筛选器。

    在 test2 这个 无效的 设置为索引1处的筛选器,然后将值设置为筛选器0。

    有人能解释这种奇怪的行为吗?我正面临着更大的问题,这只是StackOverflow帮助的一个冰山一角。目前我正在使用角 5.2.5 我正在用Google Chrome 67.0.3396.99测试MacBook OSX 10.12.6。

    1 回复  |  直到 8 年前
        1
  •  5
  •   Daniel Gimenez    8 年前

    您使用formcontrol的方式不是有意的,而且您暴露了一个副作用。

    这个bug只出现的原因 之后 您选择了筛选器2,然后返回到筛选器1,因为这会导致输入订阅第二个FormControl,而不取消订阅它绑定到的原始控件。

    因此,在测试1中,值变为空白的原因是,首先将过滤器[0]设置为值,然后更新输入元素以显示值,然后将过滤器[1]设置为空,然后更新输入元素以显示空。

    您应该将代码更改为在输入上使用ngmodel,或者按照预期使用反应形式。

    进一步解释

    我签了Github,问题在FormControlDirective中。当@input被更改时,它从shared调用setupcontrol,并在其中监听valueaccessor上的更改以更新视图。问题的出现是因为,据我所知,如果之前已经设置了一个值,就没有地方可以调用某种拆卸方法。

    替代方法

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

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