Angular: ngOnChanges 方法无法访问动态设置的实例属性

Question

谁能解释为什么 this.agGrid 在 ngOnChanges 方法中未定义？它在 ngOnChanges 方法之前执行的 onGridReady 中设置。

在我的 component.ts 文件中

  private onGridReady(agGrid) {
    this.agGrid = agGrid  // set property
    console.log(1, this.agGrid)

  }
  ngOnChanges(changed) {
    console.log(2, this.agGrid)  // property undefined
  }

控制台输出：

1 Object { type: "gridReady", api: {…}, columnApi: {…} }
2 undefined

知道为什么 this.agGrid 没有在 ngOnChanges 中定义吗？

编辑（显示如何调用 onGridReady）：

html

<ag-grid-angular
    class="ag-theme-balham"
    style="width: 100%; height: 100%;"
    [gridOptions]="gridOptions">
</ag-grid-angular>

更多 ts 文件

  private createGridOptions() {
    const gridOptions = {};
    gridOptions['onGridReady'] = this.onGridReady;
    return gridOptions;
  }
  ngOnInit() {
    this.gridOptions = this.createGridOptions();
  }

Answer 1

您正在直接分配功能。这实际上与在 function() { } 中调用 onGridReady 相同。在 function() { } 中，关键字 this 指的是函数本身。

您不是在更新组件上的 agGrid 属性 - 您是在函数本身上设置属性。

如果你想引用外部作用域——在本例中是组件——你应该使用箭头函数。

gridOptions['onGridReady'] = (agGrid) => this.onGridReady(agGrid);

演示：https://stackblitz.com/edit/angular-ay79o3

在这个演示中，按钮 1 永远不会设置组件上的 name 属性，因为它是如何调用的。按钮 2 将在组件上设置 name 属性，因为它是在箭头函数内部调用的。

Angular: ngOnChanges 方法无法访问动态设置的实例属性

Angular: ngOnChanges method cannot access dynamically set instance properties

typescript

ag-grid

angular