0

在这里，我对带有自定义过滤器的清晰数据网格有一点问题我做了这里所说的一切，过滤器可以工作但不正确

主要问题是在 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>

过滤器：

  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();
  }
}

文件管理器 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>

谢谢你的帮助！

4

1 回答 1

1

你可以尝试更换

this.states.splice(i, 1);

和

this.states = this.states.splice(i, 1);

在你的onCheckedChange方法中

于 2019-06-28T12:19:28.400 回答