Question

我有这些代码

table.component.ts：

export class TableComponent {
  private gridOptions:GridOptions;

  constructor() {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.headerCellRenderer = this.headerCellRendererFunc;
  }

  private headerCellRendererFunc(e){
    console.log(e.value);
    if (e.value !== 'checkbox') {
      return e.value;
    }

    var cb = document.createElement('input');
    cb.setAttribute('type', 'checkbox');
    var eHeader = document.createElement('label');
    eHeader.appendChild(cb);
    cb.addEventListener('change', function(e) {
      if (e[0].checked) {
        this.gridOptions.api.selectAll();
      } else {
        this.gridOptions.api.deselectAll();
      }
    });

    return eHeader;
  }  
}

错误已开启：

cb.addEventListener('change', function(e) {
  if (e[0].checked) {
    this.gridOptions.api.selectAll();
  } else {
    this.gridOptions.api.deselectAll();
  }
});

它无法识别this.gridOptions。似乎＆＃34;这个＆＃34; scope在addEventListener上。

如何引用TableComponent类的gridOptions？

Answer 1

使用箭头功能维护周围的this：

cb.addEventListener('change', e => {
  if (e[0].checked) {
    this.gridOptions.api.selectAll();
  } else {
    this.gridOptions.api.deselectAll();
  }
});

出现错误：Property＆＃39; gridOptions＆＃39;类型＆＃39; HTMLInputElement＆＃39;上不存在

1 个答案: