typescript - Angular 5 مقدار this داخل array.filter تعریف نشده است

این کدی است که من در حال امتحان کردن آن بودم

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 مربوط به undefined را میدهد، به این معنی که this تعریف نشده است.

من بررسی کردم، this همیشه تعریف نشده است، پس چگونه میتوان یک تابع را داخل فیلتر فراخوانی کرد؟

پاسخ شماره ۱

از یک تابع فلشی استفاده کنید تا this به طور خودکار به درستی متصل شود. از آنجایی که شما تایپاسکریپت را برچسب زدهاید، میتوانید توابع فلشی را اگر قصد دارید از مرورگرهایی که فقط از 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));
}

پاسخ شماره ۲

رویکرد دیگر این است که 'this' را به یک متغیر محلی خارج از فراخوانی فیلتر اختصاص دهید (مردم معمولاً از 'that' یا 'self' به عنوان شناسه برای این منظور استفاده میکنند).

مثال :

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