Question

这是我正在尝试的代码

search(){
   this.toDisplay = this.products.filter(function(x){
      return this.checkCondition(x.price, condition);
   }
}

基于条件数是大于，范围，最大的复杂条件，该函数决定条件是否满足并返回真或假;

checkCondition(item, condition){
  switch(conditoin){
    case 1:  ... brea;
    case 2:  ... brea;
    case 3:  ... brea;

  }
  return status;
}

问题是当我在过滤器中使用this.checkCondition时，总是抛出未定义的checkCondition属性，意味着this未定义。

我检查this总是未定义，那么如何调用过滤器内的函数？

Answer 1

使用arrow function以便this自动绑定。由于您标记了TypeScript，因此如果您计划支持仅支持ES5及以下版本的浏览器，则可以转换箭头功能：

search(){
   this.toDisplay = this.products.filter(x => this.checkCondition(x.price, condition));
}

如果您不想使用箭头功能，可以捕获this：

search(){
   var selfRef = this;
   this.toDisplay = this.products.filter(function(x) {
      return selfRef.checkCondition(x.price, condition);
   });
}

另一种方法是使用bind：

search(){
   this.toDisplay = this.products.filter(function(x) {
      return selfRef.checkCondition(x.price, condition);
   }.bind(this));
}

Answer 2

另一种方法是将'this'分配给过滤器调用之外的局部变量（人们通常使用'that'或'self'作为此目的的标识符。）

示例：

search(){
   var that = this;
   this.toDisplay = this.products.filter(function(x){
      return that.checkCondition(x.price, condition);
   }
}

Angular 5这个未定义在array.filter中

2 个答案: