Угловой фильтр с флажками переопределяет предыдущее значение флажка - PullRequest
Новая
       8

Угловой фильтр с флажками переопределяет предыдущее значение флажка

0 голосов
/ 05 декабря 2018

У меня есть этот фильтр .Есть 2 поля: name и group.Каждый из них работает нормально (индивидуально по категориям).Но если я попытаюсь объединить фильтры, например, tim с a, я ожидаю, что результатом будет [] (потому что tim не принадлежит группе a), но a будет немедленнопереопределить tim.

Кроме того, если я отмечу tim, а затем сниму флажок, я хочу, чтобы исходный массив снова появился.

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

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

 changeUser(event) {
   const user = event.target.value;
   const index = this.userValue.indexOf(user);

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

   this.transform(this.usersList, 'name', this.userValue)

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

 transform(items: any[], field: string, value: string[]): any[] {
   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
 }

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

    <br>

    <ng-container *ngFor="let user of users">
        <label class="btn btn-filter" id="bttns">
        <input type="checkbox" name="customersUserFilter" autoComplete="off" [value]="user" (change)="changeUser($event)">
        {{ user }}
      </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>

Как я могу изменить свой код, чтобы получить то, что я хочу?Спасибо за ваше время!

...