如何过滤特定数据以显示在角度数据表中

Question

我必须使用angular 7框架进行项目。我有很多数据要读取和显示。但是，必须从给定的原始数据中删除基于“ userName”数据的试用单元。

我具有与“ userName”数据不同的用户名。例如给出的示例： user22abc @ ngul，user23abc @ ngul，user67abc @ ngul 等...这些是示例“ userName”，需要删除，因为它实际上表明了试用。因此，我需要知道在写作中可以应用的特定语法。谢谢！

我从原始数据中有50个试用单位，我需要将其全部删除。谁能建议并指导我使用什么以及在哪里使用，因为当前代码无法解决问题？我已经浏览了示例和解决方案，但是我不太了解它。随函附上示例代码。

谢谢。

Answer 1

尝试一下

this.newArray = new Array();
for(const entry of this.yourArray) {
 if(entry.userName !== 'user22abc@ngul')
  this.newArray.push(entry.userName)
}

Answer 2

根据您的代码，我了解到您想从userName键为user22abc@ngul的数组中删除这些对象。为此，您可以使用如下所示的过滤器

this.newArray = this.oldArray.filter((item) => item.userName !== 'user22abc@ngul')

上面的代码将要做的是，它将过滤掉所有userName不是user22abc@ngul的对象。希望这会有所帮助。

Answer 3

我不确定要在数据表上显示的数据的确切结构，但我将假定最常见的用例，即用类似于以下格式的对象数组：

const original = [
  {
    userName: 'user22abc@ngu',
    name: 'aaa',
    id: 'aaa1'
  },
  {
    userName: 'user33azzz@ngu',
    name: 'bbb',
    id: 'bbb1'
  },
]

我将使用spread syntax创建原始数组的浅表副本。这是为了确保任何突变都不会影响原始阵列。接下来，应用Array.filter()方法以筛选出具有匹配用户名的对象数组。

const filteredCopy = [...original].filter(row => row['username'] !== 'user22abc');
console.log(filteredCopy);

---

编辑：如果需要从用户名数组中过滤出来，则必须进行一些修改。我传递给filter（）的自定义函数实际上检查2个条件：

1）我使用了includes()，它实际上检查用户名数组是否包含该特定元素的用户名。通过否定该语句（使用!），我实质上返回了其用户名不属于usernameList数组的元素。

2）我检查了用户名的前4个字符是否与字符串user相匹配。

const original = [
  {
    username: 'user22abc@ngu',
    name: 'aaa',
    id: 'aaa1'
  },
  {
    username: 'user33azzz@ngu',
    name: 'bbb',
    id: 'bbb1'
  },
  {
    username: 'user11@ngu',
    name: 'bbb',
    id: 'bbb1'
  },
  {
    username: 'bzzzz@ngu',
    name: 'bbab',
    id: 'bbb12'
  },
]

const usernameList = ['user22abc@ngu', 'user11@ngu'];

const filtering = usernameList => {
  const filteredCopy = [...original].filter(row => !usernameList.includes(row['username']) && row['username'].substring(0,4) === 'user');
  return filteredCopy;
}

filtering(usernameList);

请注意，.includes()是ES7的一部分，因此某些较旧的浏览器（例如Internet Explorer）不支持它。