Angular 嵌套组件和响应式表单更新数据模型

Question

问题是在我的表单中更新值然后选择按钮再次显示表单后，有时值仍然存在。我尝试使用 BehaviorSubject 以不同的方式执行此操作，并尝试使用 EventEmitter 执行此操作。任何帮助将不胜感激。

我附上了插件：Plunker

以下是我的 plunker 示例的数据。

  this.units = [
  { 
    id: 1, 
    name: "Unit 1", 
    alarms: [
      { 
        name: "Alarm 1",
        description: ""
      },
      { 
        name: "Alarm 2",
        description: ""
      }
    ]
  },
  { 
    id: 2, 
    name: "Unit 2", 
    alarms: [
      { 
        name: "Alarm 1",
        description: ""
      },
      { 
        name: "Alarm 2",
        description: ""
      },
      { 
        name: "Alarm 3",
        description: ""
      }
    ]
  }
];

用户选择单元 1 按钮并更新第一个警报的描述属性。用户单击单元 2 按钮，数据通过调用 this.updateData(changedProp.previousValue);[=27= 保存到 ngOnChange 的集合中] 当用户单击按钮 Unit 1 时，第一个警报描述中更改的值并不总是存在。

我也不确定是否有更好的方法。

如有任何帮助，我们将不胜感激。

Answer 1

从父级访问子 UnitEdit 组件，当 select tab 时，从父级调用 this.unitComp.updateData(unit) 方法以保存单元状态：

export class App {
  units: Unit[];
  unit: Unit = null;
  constructor(private unitService: UnitService) {
  }

    @ViewChild(UnitEditComponent)
  private unitComp: UnitEditComponent;

  ...

  unitSelected(unit: Unit) {
    this.unitComp.updateData(this.unit);
    // save unit states
    console.log(this.unitComp)
    this.unit = unit;
  }
}

如果您需要有关 @ViewChild 装饰器的更多详细信息，请查看 Parent calls an @ViewChild()

Plunker EXAMPLE

Angular 嵌套组件和响应式表单更新数据模型

Angular nested component and reactive forms updating data model

angular-components

angular

angular-reactive-forms