Сетка данных Clarity с настраиваемым фильтром не очищает коллекцию элементов

здесь у меня небольшая проблема с сеткой данных ясности с настраиваемыми фильтрами. Я сделал все, как сказано, здесь и фильтры работают, но не правильно

основная проблема заключается в коллекции элементов Datagrid, когда метод accept возвращает false для элемента, он не удаляет его из коллекции элементов datagrid, а когда метод accept возвращает true для этого элемента, он просто дублирование в сетке данных

Вот пример:

Datagrid HTML:

<clr-datagrid class="custom-dg">
    <clr-dg-column [clrDgField]="'transaction.date'"
                   [clrDgSortBy]="transactionDateComparator">
      Date
      <clr-dg-string-filter [clrDgStringFilter]="transactionDateFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'transaction.state'"
                   [clrDgSortBy]="transactionStateComparator">
      State
      <clr-dg-filter>
        <app-transaction-state-filter [transactions]="this.transactionsList"></app-transaction-state-filter>
      </clr-dg-filter>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'transaction.sum'"
                   [clrDgSortBy]="transactionSumComparator">Sum</clr-dg-column>
    <clr-dg-column [clrDgField]="'transaction.source'"
                   [clrDgSortBy]="transactionSourceComparator">Source</clr-dg-column>
    <clr-dg-column [clrDgField]="'transaction.destination'"
                   [clrDgSortBy]="transactionDestinationComparator">Destination</clr-dg-column>
    <clr-dg-column [clrDgField]="'transaction.comment'"
                   [clrDgSortBy]="transactionCommentComparator">Comment</clr-dg-column>

    <clr-dg-row *clrDgItems="let transaction of this.transactionsList">
      <clr-dg-cell>{{transaction.date}}</clr-dg-cell>
      <clr-dg-cell>{{transaction.state}}</clr-dg-cell>
      <clr-dg-cell>{{transaction.sum}}</clr-dg-cell>
      <clr-dg-cell>{{transaction.source}}</clr-dg-cell>
      <clr-dg-cell>{{transaction.destination}}</clr-dg-cell>
      <clr-dg-cell>{{transaction.comment}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="10">
        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Transactions per page</clr-dg-page-size>
        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
        of {{pagination.totalItems}} transactions
      </clr-dg-pagination>
    </clr-dg-footer>
  </clr-datagrid>

Фильтр TS:

  export class TransactionStateFilterComponent implements ClrDatagridFilterInterface<Transaction> {

  private states: string[] = new Array();

  @Input()
  transactions: Transaction[];

  constructor(private filterContainer: ClrDatagridFilter) {
    filterContainer.setFilter(this);
  }
  accepts(transaction: Transaction) {

    if (this.states.indexOf(transaction.state.toString()) > -1) {
      return true;
    } else {
      return false;
    }
  }

  changes = new Subject<any>();
  isActive(): boolean {
    return true;
  }


  onCheckedChange(param: string) {
    if (this.states.indexOf(param) > -1) {
      this.transactions = [];
      for (var i = 0; i < this.states.length; i++) {
        if (this.states[i] === param) {
          this.states.splice(i, 1);
          i--;
        }
      }
    } else {
      this.states.push(param);
    }

    this.changes.next();
  }
}

Filer HTML:

<div>
  <div>
    <p><input type="checkbox" (change)="onCheckedChange('1')" />Failed</p>
  </div>
  <div>
    <p><input type="checkbox" (change)="onCheckedChange('2')" />InProgress</p>
  </div>
  <div>
    <p><input type="checkbox" (change)="onCheckedChange('3')" />Denied</p>
  </div>
  <div>
    <p><input type="checkbox" (change)="onCheckedChange('4')" />Canceled</p>
  </div>
  <div>
    <p><input type="checkbox" (change)="onCheckedChange('5')" />Successful</p>
  </div>
</div>

Спасибо за помощь!