Question

我试图通过使用'this'关键字从filterfunction（）调用方法。但是，我意识到'this'是指事件处理程序而不是组件，而我为'this'获取的值为null，因此我得到运行时错误。

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction(cell?: any, search?: string): boolean {          
          return this.doFilter(cell, search);
        }
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

在Java中，我们将使用SmartTableComponent.this.doFilter（...）来引用'this'，但这似乎不适用于TypeScript。

如何从ng2-smart-table中的filterFunction调用组件的方法？

Answer 1

问题是，无论谁调用此函数都会设置 this 变量，因此您对该函数中 this 的含义的想法已经改变。要将 this 修复为该函数（并防止其更改），您可以使用Bind。以下代码显示了（希望）工作示例。

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction(cell?: any, search?: string): boolean {          
          return this.doFilter(cell, search);
        }.bind(this)
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

我之前的解释比严格正确更直观，如果你真的想知道它是如何工作的，请查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

似乎通过使用lambda表达式而不是匿名函数，＆＃39;这个＆＃39;从包装类维护。所以，这是解决方案：

export class SmartTableComponent {

  settings = {
    ...
    columns: {
      ...
      firstName: {
        title: 'First Name',
        type: 'string',
        filterFunction:(cell?: any, search?: string) => {
          return this.filterByText(cell.doc[0]['value'], search);
        },
      },
      ...
    },
    ...
  };


  doFilter(cell?: any, search?: string): boolean{
    return true;
  }
}

我在这里得到了这个想法：Angular 4 , 'this' is undefined when using callback 'onComponentInitFunction' function of ng2-smart table

如何从ng2-smart-table中的filterFunction（）调用方法？

2 个答案: