Angular2 (beta3)“检查后表达式已更改"在更新表单值时 [英] Angular2 (beta3) "expression has changed after it was checked" in updating form values
问题描述
这是我上一篇关于 Angular2(带有 TS 的 beta 3)嵌套表单的文章的延续(Angular2 beta:嵌套基于表单的父/子组件并从父组件验证)，但我发布了一个新问题，因为它指的是不同类型的问题.
This is a sort of continuation of my previous post about nested forms in Angular2 (beta 3 with TS) (Angular2 beta: nesting form-based parent/child components and validating from parent), but I'm posting a new question as it refers to a different type of issue.
您可以在 http://plnkr 找到此处描述的问题的重现.co/edit/iCmmy9at2wF5qY0P6VmV.简而言之，在这个假场景中，我有一个组件代表虚构字典中的单个单词，另一个子组件用于表示该单词的每个词义；因此，父组件与其子组件之间存在一对多关系.两者都有一个基于表单的模板，使用表单构建器构建.子模板位于 NgFor 中，我在其中绑定来自父 (=word) 模型的每个意义.这样，每个词义的所有属性都会自动绑定到词的模型上.
You can find the repro of the issue described here at http://plnkr.co/edit/iCmmy9at2wF5qY0P6VmV. In short, in this fake scenario I have a component representing a single word from an imaginary dictionary, and another child component used to represent each sense for that word; thus, there is a 1-to-many relation between the parent component and its children. Both have a form-based template, built with a form builder. The child template is inside a NgFor, where I bind each sense from the parent (=word) model. This way, all the properties of each word's sense are automatically bound to the word's model.
其中一些属性附加了多个验证器(自定义或标准).我的问题是，当我从父组件以编程方式设置 word 模型时(这也意味着设置表单控件的值)，这似乎在验证过程中触发了一些竞争条件，从而引发了几个 EXCEPTION 类型的异常: 表达式 '!definitionCtl.valid' 在检查后已更改.以前的值:'真'.当前值:'false'，阻止进一步的代码执行.
Some of these properties have several validators attached (either custom or standard). My issue is that when I programmatically set the word model from the parent component (which also implies setting the value of the form's controls), this seems to trigger some race condition in the validation process, which raises several exceptions of type EXCEPTION: Expression '!definitionCtl.valid' has changed after it was checked. Previous value: 'true'. Current value: 'false', which block further code execution.
AFAIK，似乎与此问题相关的唯一信息在这里:
AFAIK, the only information which seems related to this issue is here:
然而，这些讨论似乎并没有解决我的问题，除非(如果我理解得很好)我选择手动管理我的所有绑定，我想避免这种情况，就像在现实世界中一样应用程序会有很多.有人可以帮忙吗?
Yet a solution for my issue does not seem to be at hand from those discussions, unless (if I understand well) I opt for manually managing all my bindings, which I'd like to avoid, as in the real-world application there will be lots of them. Could anyone help?
推荐答案
您可以尝试禁用 Angular2 开发模式:
You could try to disable the Angular2 dev mode:
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {enableProdMode} from 'angular2/core';
enableProdMode();
bootstrap(App, [])
.catch(err => console.error(err));
有关详细信息，请参阅君特的回答:
See the Günter's answer for more details:
这篇关于Angular2 (beta3)“检查后表达式已更改"在更新表单值时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
