如何将自定义过滤结果传递给原始组件？答案

【问题标题】：How to pass custom filter result to original component?如何将自定义过滤结果传递给原始组件？
【发布时间】：2019-01-17 11:41:18
【问题描述】：

我正在尝试对日期字段实施自定义过滤。我创造了

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">
...

  <clr-dg-column>
    Conflict
    <clr-dg-filter>
      <date-filter #conflict></date-filter>
    </clr-dg-filter>
  </clr-dg-column>


  <clr-dg-row *ngFor="let d of data">
    <clr-dg-cell>{{d.lastUpdated | date}}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{total}} data
    <clr-dg-pagination #pagination [clrDgTotalItems]="total"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

持有这个的组件是

  refresh(state: ClrDatagridStateInterface<User>) {
    this.loading = true;
    const filters: { [prop: string]: any[] } = {};
    if (state.filters) {
      for (const filter of state.filters) {
        const { property, value } = <{ property: string; value: string }>filter;
        filters[property] = [value];
      }
    }
    this.inventory
      .fetch(state.page.from, state.page.size)
      .then((result: FetchResult) => {
        this.user= result.user;
        this.total = result.length;
        this.loading = false;
      });
  }

日期过滤器是另一个具有字段的组件

<form class="clr-form clr-form-compact" (ngSubmit)="onFormSubmit()">
  <clr-input-container>
    <label>From</label>
    <input clrInput type="date" [(ngModel)]="model.from" name="search"/>
  </clr-input-container>
  <clr-input-container>
    <label>To</label>
    <input clrInput type="date" [(ngModel)]="model.to" name="search"/>
  </clr-input-container>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="pull-right">
        <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>

</form>

这是我获取日期输入的组件。

export class DateFilterComponent implements ClrDatagridFilterInterface < User> {

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

  changes: EventEmitter<any> = new EventEmitter<any>(false);

 model: search = {
    from: '',
    to: ''
 };

  onFormSubmit() {
    console.log(this.model);
  }

  accepts(User: user) {
    return true;
  }

  isActive(): boolean {
    return true;
  }

}

我在 onFormSubmit 方法中获取日期，但我想将其发送到处理获取部分的原始组件，但不知道该怎么做。还有多个字段我想要自定义过滤，所以理想情况下应该有一个过滤方法，它包含所有过滤数据，但找不到清晰的方法。

【问题讨论】：

跨列过滤是计划在积压中添加的：github.com/vmware/clarity/issues/1632

标签： angular vmware-clarity

【解决方案1】：

我只需要发出事件，其余的都被清晰地处理了，所以在提交表单中我这样做了，它调用了刷新事件。

this.changes.emit(new Select());

【讨论】：