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

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

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

任何帮助都将不胜感激。

Answer 1

从父级访问子UnitEdit组件，并在选择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嵌套组件和反应形式更新数据模型

1 个答案: