隐藏表单

Question

我有一张表格，允许雇主为员工编辑信息。在Angular中，它是一个模板驱动的形式，我们使用ngModel进行双向数据绑定。在页面加载时，我们从数据库中获取员工的信息，然后他们可以编辑它。很基本的东西。我们已经这样做了一段时间，但现在正在添加他们的编辑和保存到数据库之间的确认步骤。

我决定这样做，以便当从表单到差异列表进行确认时，编辑表单会隐藏*ngIf。如果他们想要返回并撤消更改或进行更多更改，则会再次显示该表单。同样，它是相对基本的东西，它都发生在一个主要组件中（其中嵌套了多个子组件）。

问题是，当从表单转到确认步骤，然后再回到编辑时，员工模型不会显示inputs中的值。

这是页面加载时的表单：

这是在进入摘要步骤然后回到表单

之后

如果我console.log员工模型在步骤之间来回走动，我可以看到正确的信息。但它没有在输入页面中显示。

任何理由都会有所帮助。我不确定是什么导致它。我知道这里没有大量的细节，但这是因为我不确定是什么导致它，这不是一个复杂的过程。希望在这里有足够的人可以指出我正确的方向。

修改

以下是表单组件中的ngOnChanges函数：

您可以看到我将其重置为null，然后将employee变量设置为传递给组件的内容。这是console.log显示的内容：

但同样，浏览器中的模板没有输入字段中的值，也没有在JSON中输出雇员变量时显示的值：{{ employee | json }}。

Answer 1

由于没有代码，我只能根据自己的经验猜测。我相信当您再次显示表单时，不会检查子组件中的ngOnChanges。

尝试做类似

的事情

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    if (changes.property) {
      this.property = changes.property.currentValue;
      // if  changeDetection: ChangeDetectionStrategy.OnPush
      this.ChangeDetectorRef.detectChanges()
    }
  }

Answer 2

所以，事实证明这是ngOnInit函数：

this.employee = new EmployeeClass();

从发展的早期开始，它一定是一个障碍。在页面加载时，它工作正常，可能是因为新实例已经生成，然后数据从数据库返回。但是在这种情况下，当您返回一个步骤而没有从数据库重新加载时，ngOnInit函数会取代ngOnChanges。或者沿着这些方向的东西......我所能想到的就是正在发生的事情。