Question

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

<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方法中获取日期，但是我想将其发送到处理获取部分的原始组件，但不确定如何执行。也有多个领域我想在其中进行自定义过滤，因此理想情况下应使用单一过滤方法，该方法具有所有过滤数据，但找不到清晰的方法。

Answer 1

我只需要发出事件，其余的就清楚了，因此在提交表单中，我将其称为刷新事件。

this.changes.emit（new Select（））;

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

1 个答案: