Angular 角度2-双层嵌套表单-不初始化子对象的子对象

我遵循了有关如何为angular创建嵌套表单的教程。我已经分叉了他们的代码，并创建了一个两层嵌套表单

以下是我的目标：

父窗体（带输入框的div）

能够向父级添加多个子级（带有输入框的div）

能够将多个孙子添加到上面创建的子级（带有输入框的div）

问题是： 单击“添加孩子”后，我无法使孙子（孩子的孩子-婴儿）输入框显示。输入框仅在我单击“添加婴儿”后显示。
输入框仅在初始化期间出现。 请查看我的Plunker：

我相信我必须在这里初始化它：（当我添加子对象时）

当我添加孩子时，我看不到婴儿的输入框

 addChild() {
        const child: ChildData = {
            id: Math.floor(Math.random() * 100),
            childField1: 'hello',
            childField2: '',
            childHiddenField1: '',
            kid: []
        };

        this.children.push(child);
        this.cd.detectChanges();
        return false;
    }

---

请检查我的Plunker:

当然没有渲染，因为

kid:[]

是一个空数组。第一行是

。表单底部有一个JSON转储。只要看看您正在提交的实例数据与存在字段时数据状态之间的差异。@NeilLunn我根据您的建议修改了我的代码

kid:[{id:Math.floor（Math.random（）*100），infantField:'}]

，但现在我看到了一个不同的错误。现在我看到

ERROR错误：expressionChangedTerithasBeenCheckedError:Expression在检查后已更改。上一个值：

我在Plunker上复制了这个，请看一看：。请检查控制台是否也有错误。非常感谢。当然没有渲染，因为

kid:[]

是一个空数组。第一行是

。表单底部有一个JSON转储。只要看看您正在提交的实例数据与存在字段时数据状态之间的差异。@NeilLunn我根据您的建议修改了我的代码

kid:[{id:Math.floor（Math.random（）*100），infantField:'}]

，但现在我看到了一个不同的错误。现在我看到

ERROR错误：expressionChangedTerithasBeenCheckedError:Expression在检查后已更改。上一个值：

我在Plunker上复制了这个，请看一看：。请检查控制台是否也有错误。非常感谢。

 addChild() {
        const child: ChildData = {
            id: Math.floor(Math.random() * 100),
            childField1: 'hello',
            childField2: '',
            childHiddenField1: '',
            kid: []
        };

        this.children.push(child);
        this.cd.detectChanges();
        return false;
    }