ng2-handsontable 从渲染器内部访问 ng 组件属性

Posted 2023-03-22

【中文标题】ng2-handsontable 从渲染器内部访问 ng 组件属性

【英文标题】：ng2-handsontable Access to ng component properties from inside renderer

【发布时间】：2018-02-27 04:47:31

【问题描述】：

有没有办法从渲染器函数内部访问宿主组件中定义的属性？我尝试使用关键字“this”，但它始终未定义。

import * as Handsontable from 'handsontable';
import  Component  from '@angular/core';

@Component(
  moduleId: module.id,
  selector: "my-component",
  templateUrl: "my-component.component.html"
)
export class MyComponentComponent
  

  public  newColumns: any[] = [
          data: 'A',
          renderer: this.styleRenderer
        ];

 public data :any[] = [A:'1']
  constructor(
  ) 
  

  public styleRenderer(instance, td, row, col, prop, value, cellProperties) 

    Handsontable.renderers.TextRenderer.apply(this, arguments);
    console.log('is this null ?:',this);  //<-  "this" is always undefined in the given context

  

谢谢。

【问题讨论】：

你没有初始化数组cellStyles:array<any> = new array<any>();应该可以解决这个问题

谢谢 Aravind，但这不是问题，我只是编辑了问题并添加了更多信息。

何时更新属性？可以看完整代码吗？？

谢谢 Aravind，问题不在于 cellStyles 的价值，这只是我用来展示关键字 THIS 的示例，我们使用它来指代主机组件和获取对属性的访问是未定义的，因此，我们无法访问它的属性。它只发生在 styleRender 函数上下文中。

这个函数在哪里写在一个单独的文件中？能贴出完整的代码吗？

【参考方案1】：

根据what I found here试试下面

const $component = this;

public newColumns: any[] = [
  data: 'A',
  renderer: (instance, td, row, col, prop, value, cellProperties) =>     
    console.log('is this null ?:', $component);  //<-  Try using $component from above instead of this
  
];

【参考方案2】：

它通过使用箭头函数来工作：

    styleRenderer = (hotTable: any, td: HTMLElement, row: any, col: any,
        prop: any, value: string, cellProperties: any) => 
        // 'this' component can be referenced from here