Как передать пользовательский результат фильтрации на оригинальный компонент? - PullRequest
Новая
       7

Как передать пользовательский результат фильтрации на оригинальный компонент?

0 голосов
/ 17 января 2019

Я пытаюсь внедрить пользовательскую фильтрацию в поле даты. Я создал 

<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, но я хочу отправить его исходному компоненту, который обрабатывает извлекаемую часть, но не уверен, как это сделать. Также есть несколько полей где я хотел бы использовать пользовательскую фильтрацию, так что в идеале должен быть один метод фильтрации, который имеет все данные фильтрации, но не может найти ясного способа сделать это.

1 Ответ

0 голосов
/ 17 января 2019

Мне нужно только отправить событие, а остальное позаботится о ясности, поэтому в форме отправки я делаю это, и она вызывает событие обновления.

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

...