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

用户2263572

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

在我的 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();
  }
库尔特·汉密尔顿

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

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

如果你想引用外部作用域——在这种情况下是组件——你应该使用箭头函数。

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章