动态更改javascript筛选器函数内部的属性

我想根据通过父函数传递的参数，将筛选函数内部的属性d.name更改为d.role或d.id。但我无法在过滤函数中访问它

   const temp = this.temp.filter(function(d) {
   return d.name.toLowerCase().indexOf(val) !== 
    -1 || !val;
    });

---

最好的方法是什么？我做了一些搜索，但似乎找不到好的解决办法。任何帮助都将不胜感激

您可以为此使用方括号语法，因此

   key = 'role'

   const temp = this.temp.filter((d) => {
     return d[key].toLowerCase().indexOf(val) !== 
        -1 || !val;
   });

---

您可以为此使用方括号语法，因此

   key = 'role'

   const temp = this.temp.filter((d) => {
     return d[key].toLowerCase().indexOf(val) !== 
        -1 || !val;
   });

---

您始终可以在此处使用另一个对象成员访问模式

使用

keyToFilterOn

的值将

d[keyToFilterOn]

保留为“角色”类似于执行

d.role

那么为什么不这样做呢：

let keyToFilterOn = 'role'; // or id
const temp = this.temp.filter(d => {
  return d[keyToFilterOn].toLowerCase().indexOf(val) !== -1 || !val;
});

这样，您就不必为它创建函数

可供替代的 您可以创建AngularPipe，然后在TypeScript类中使用它：

这是

过滤器

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(temp: any[], filterBy: string, filterValue: any): any {
    if (!filterBy || !filterValue) {
      return input;
    }
    return temp.filter(d => {
      return d[filterBy].toLowerCase().indexOf(filterValue) !== -1 || !filterValue;
    });
  }

}

以下是如何使用它：

import { FilterPipe } from 'path/to/the/pipe';

class YourComponent {

  YourFunction(value) {
    let filteredData = new FilterPipe().transform(this.temp, keyToFilterOn, val);
  }
}

---

尽管Angular并不建议使用

管道

来过滤数据。但是，由于这是在类内部使用的，而不是在模板中使用的，所以这很好。

您始终可以在这里使用另一个对象成员访问模式

使用

keyToFilterOn

的值将

d[keyToFilterOn]

保留为“角色”类似于执行

d.role

那么为什么不这样做呢：

let keyToFilterOn = 'role'; // or id
const temp = this.temp.filter(d => {
  return d[keyToFilterOn].toLowerCase().indexOf(val) !== -1 || !val;
});

这样，您就不必为它创建函数

可供替代的 您可以创建AngularPipe，然后在TypeScript类中使用它：

这是

过滤器

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(temp: any[], filterBy: string, filterValue: any): any {
    if (!filterBy || !filterValue) {
      return input;
    }
    return temp.filter(d => {
      return d[filterBy].toLowerCase().indexOf(filterValue) !== -1 || !filterValue;
    });
  }

}

以下是如何使用它：

import { FilterPipe } from 'path/to/the/pipe';

class YourComponent {

  YourFunction(value) {
    let filteredData = new FilterPipe().transform(this.temp, keyToFilterOn, val);
  }
}

---

尽管Angular并不建议使用

管道

来过滤数据。但是，由于这是在类中使用的，而不是在模板中使用的，所以这很好。

您可以将筛选函数包装到其他函数中，只需传入要筛选的属性名称即可

例如：

让arr=[{name:“xyz”，role:“admin”}，{name:“xyz”，role:“teacher”}，{name:“abc”，role:“admin”}]；
功能过滤器列表（arr、prop、val）{
返回arr.filter（e=>e[prop]==val）；
}
log（filterList（arr，“role”，“admin”）；
日志（filterList（arr，“name”，“xyz”）您可以将筛选函数包装在其他函数中，只需传入要筛选的属性名称即可

例如：


让arr=[{name:“xyz”，role:“admin”}，{name:“xyz”，role:“teacher”}，{name:“abc”，role:“admin”}]；
功能过滤器列表（arr、prop、val）{
返回arr.filter（e=>e[prop]==val）；
}
log（filterList（arr，“role”，“admin”）；
日志（filterList（arr，“name”，“xyz”）
更改
.filter（）
中的数组元素似乎是一个非常可疑的想法。而且您的问题完全不清楚。你不能访问什么？你怎么知道你不能访问它？你有错误吗？如果是，是什么？有什么事情发生吗？你可以用
closure
s来完成。它们基本上是可以返回具有不同参数的函数。更改
.filter（）
中的数组元素似乎是一个非常有问题的想法。而且您的问题完全不清楚。你不能访问什么？你怎么知道你不能访问它？你有错误吗？如果是，是什么？有什么事情发生吗？你可以用
closure
s来完成。它们基本上是可以返回具有不同参数的函数。我尝试了这个，返回d[this.filterType].toLowerCase（）.indexOf（val）！=-1 || !瓦尔；但我一直收到这样的错误：错误类型错误：无法读取未定义的this的属性'filterType'。filterType是我设置为id的全局变量，如果我将其记录在父函数中，则它具有该值。@cheesydoritosandkale我已更新了使用箭头函数的答案。尝试that@user184994，我们是不是有神经联系我认为它不起作用，因为我把它设定为一个全球性的可能？当我使用let时，它起作用了@cheesydoritosandkale实际上，它不起作用的原因可能与
这个
范围有关。
this
的作用域在每个封闭函数中都会发生变化，但是如果我们使用箭头函数，它会保留封闭作用域，因此
this
仍然是定义的。我尝试了这个方法，返回d[this.filterType].toLowerCase（）.indexOf（val）！=-1 || !瓦尔；但我一直收到这样的错误：错误类型错误：无法读取未定义的this的属性'filterType'。filterType是我设置为id的全局变量，如果我将其记录在父函数中，则它具有该值。@cheesydoritosandkale我已更新了使用箭头函数的答案。尝试that@user184994，我们是不是有神经联系我认为它不起作用，因为我把它设定为一个全球性的可能？当我使用let时，它起作用了@cheesydoritosandkale实际上，它不起作用的原因可能与
这个
范围有关。
此
的范围在每个封闭函数中都会发生变化，但是如果我们使用箭头函数，它会保留封闭范围，因此
此
仍然是定义的。实际上，当我将其用作全局函数时，它不起作用，但我将其设置为与您一样，并且它起作用！很高兴它做到了。如果你愿意的话，我有另一种方法？哦，事实上，当我用它作为一个全局变量时，它不起作用，但我设置它就像你做的一样，它起作用了！很高兴它做到了。如果你愿意，我还有别的办法吗？