Question

I have this working snippet。我想使用复选框过滤表。问题是例如当我检查a时，它给了我过滤后的数组。但是当我取消选中它时，我想将原始数组返回给我。

.html

<ng-container *ngFor="let group of groups">
    <label class="btn btn-filter" id="bttns">
    <input type="checkbox" name="customersGroupFilter" autoComplete="off" [value]="group" (change)="changeGroup($event)">
    {{ group }}
  </label>&nbsp;
</ng-container>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Group</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of newArray">
      <td>{{user.name}}</td>
      <td>{{user.group}}</td>
    </tr>
  </tbody>
</table>

.ts

  changeGroup(event) {
    const group = event.target.value;
    const index = this.groupValue.indexOf(group);

    if (index > -1) {
      this.groupValue.splice(index, 1);
    } else {
      this.groupValue.push(group);
    }

    this.transform(this.usersList, 'group', this.groupValue)
  }

  transform(items: any[], field: string, value: string[]): any[] {
    console.log(value)
    if (!items) {
      return [];
    }
    if (!field || !value || value.length <= 0) {
      return items;
    }

    this.newArray = items.filter(singleItem => {
      return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
    });

    return this.newArray
  }

如何修改此代码以获得我想要的东西？

我在changeGroup()

中尝试了这样的条件

if (this.groupValue.length == 0) {
   this.transform(this.usersList, '', this.groupValue)
}

这也是筛选表格的好方法吗？我尝试避免使用pipe filters。谢谢您的时间！

Answer 1

已更新！

您要从原始阵列中删除项目，因此不再拥有数据。

您可以使用不可变方法，因此使用散布运算符可以创建该数组的新版本，然后进行拼接，然后取消选中该复选框，即可将数组重置为原始值。

originalArray = [1,2,3,4]
newArray = [...array]

然后我将使用newArray变量而不是原始变量不进行ngFor，这意味着您的表将对修改后的数组做出反应，但始终将originalArray作为参考

下面是transform方法的更新片段。

transform(items: any[], field: string, value: string[]): any[] {

    if (!items) {
      return [];
    }

    if (!field || !value || value.length <= 0) {
      return this.newArray = [...this.usersList.slice()];
    }

    this.newArray = items.filter(singleItem => {
      return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
    });

    return this.newArray
  }
}

Answer 2

尝试像这样进行更改，这应该可行。

...
if (this.groupValue.length == 0) {
  this.transform(this.usersList, '', this.groupValue)
}
...

...
if (!field || !value || value.length <= 0) {
    this.newArray = this.usersList.slice()
    return this.newArray
}
...

带有复选框的Angular 6过滤器表

2 个答案: