角嵌套组件和反应形式更新数据模型 [英] Angular nested component and reactive forms updating data model

问题描述

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

The problem is that after updating values in my form and then selecting the button to display the form again the values are sometimes there. I have tried to do this in different ways using a BehaviorSubject and also doing it with the EventEmitter. Any help would be appreciated.

我已经附上了塞子:塞子

以下是我的小矮人示例的数据.

Below is the data for my plunker example.

  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: ""
      }
    ]
  }
];

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

The user selects Unit 1 button and updates the description property of the first Alarm. The user clicks on the Unit 2 button and the data is save to the collection in the ngOnChange with the call to this.updateData(changedProp.previousValue); When the user click on button Unit 1 the value changed in the description of the first alarm is not always there.

我也不知道是否有更好的方法.

I am also not sure if there is a better way of doing this.

任何帮助将不胜感激.

推荐答案

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

Get access to child UnitEdit component from parent and when select the tab, call this.unitComp.updateData(unit) method from parent to save unit state:

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装饰器的更多详细信息，请参见父母调用@ViewChild()

If you need more detail about @ViewChild decorator look at Parent calls an @ViewChild()

柱塞示例

这篇关于角嵌套组件和反应形式更新数据模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！