1

我正在尝试使用“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 调用组件的方法？

4

2 回答 2

2

似乎，通过使用 lambda 表达式而不是匿名函数，'this' 的值是从包装类维护的。所以，这是解决方案：

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

于 2018-06-01T19:26:49.123 回答
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

于 2018-05-30T13:53:14.860 回答