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

Question

I have this working snippet . I want to filter a table using checkboxes. The problem is when I check a for example, it gives me the filtered array. But when I uncheck it, I want to return me the original array.

.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
  }

How can I modify this code in order to obtain what I want?

I tried something with a condition like this in changeGroup()

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

Also, is this a good way to filter a table? I tried avoiding pipe filters . Thank you for your time!

Answer 1

UPDATED!!

You are deleting items from the original Array therefore you no longer have the data.

You can use an immutable approach so using a spread operator create a new version of that array which you then splice and then when the checkbox is unchecked you reset the array back to the original value.

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

I would then do an ngFor using the newArray variable and not the original variable, this means your table will react to the modified array but you will always have the originalArray as a reference.

Below is an updated snippet of the transform method.

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

try changing like this, this should work.

...
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
}
...