0

我有这个组件作为父组件（facility.component），我在这个父组件中嵌入了一个子/内部组件（editableTable.component），就像这样

设施组件

  <editable-table 
  [dataList]="nursingUnitList" 
  (dataListUpdater)="updateNursingUnitList($event)">
  <editable-table>

facility.ts（调用服务并从 NursingUnit 表中获取所有数据）

 updateNursingUnitList(getUpdate: boolean) {
    if (getUpdate == true) {
      this.nursingUnitService.getAllUnits().subscribe(
        (data: nursingUnit[]) => {
          this.nursingUnitList = data;
        }
      )

在智利/内部组件中，我有这个，

editableTable.ts（通过单击刷新按钮，从 NursingUnit 表中获取最新/刷新的项目列表）

export class EditableTableComponent implements OnInit {

@Input() dataList: any[];
@Output() dataListUpdater = new EventEmitter<boolean>();

refresh() {

this.dataListUpdater.emit(true);

if (this.dataList.length != 0) {
// After getting updated/refreshed list do something here
// but I just got the dataList is null as the compiler not wait for emitter to get the updated/refreshed list from the parent component
    }

}

我的问题是如何在发出点等待以获取更新的列表，例如 angular 中的订阅服务或 C# 中的异步等待。

感谢您提供的任何帮助！

4

2 回答 2

1

在子组件（editableTable.ts）中，您可以实现一个 OnChanges 钩子，它看起来像这样：

ngOnChanges(changes: SimpleChanges): void {
  const { dataList } = changes;
  if (dataList && dataList.previousValue !== dataList.currentValue) {
    'here call method which will handle dataList as you wish, because at this
     moment your dataList is updated from parent component. But don't call
     refresh() method because it will again emit Output from child component
     so you need to move code which handle dataList in a separate method.'
  }
}
于 2019-06-12T17:13:09.190 回答
1

您可能想查看OnChanges生命周期挂钩。

export class EditableTableComponent implements OnInit, OnChanges {

  @Input() dataList: any[];
  @Output() dataListUpdater = new EventEmitter<boolean>();

  ngOnChanges(change: SimpleChanges) {
    if(change.dataList) {
      // do something
    }
  }

}
于 2019-06-12T17:06:01.520 回答