Question

在这里我对使用自定义过滤器的清晰度数据网格有一点问题我所做的一切都像所说的here，并且过滤器可以正常工作，但不正确

主要问题在于Datagrid项目集合中，当accepts方法为该项目返回 false 时，它并没有将其从datagrid项目集合中删除，并且当accepts方法返回 true 该项目只是在datagrid中复制

以下是示例：

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

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

谢谢您的帮助！

Answer 1

您可以尝试替换

this.states.splice(i, 1);

与

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

使用您的onCheckedChange方法

带有自定义过滤器的清晰数据网格不会清除项目集合

1 个答案: