如何从ag-grid中的自定义浮动过滤器组件打开过滤器菜单?

时间:2017-10-27 12:48:27

标签: angular ag-grid ag-grid-ng2

我想从Angular 2+中的自定义浮动滤镜组件打开带有滤镜选项的小菜单 就像在official documentation中一样,它应该是一个浮动的输入字段,旁边有一个图标 enter image description here
我设法创建了一个自定义浮动组件,对我来说很好。唯一的问题是打开小菜单选择过滤器选项,如浮动过滤器的默认实现(见下图)。 enter image description here

您能告诉我如何从自定义浮动过滤器中打开此菜单,或者至少是默认组件如何设置这样做?

以下是我的一些代码:

打字稿

export interface TextFloatingFilterChange {
  model: SerializedTextFilter
}

export interface TextFloatingFilterParams extends IFloatingFilterParams<SerializedTextFilter, TextFloatingFilterChange> {
  value: string
}

@Component({
  selector: 'floating-text-filter',
  templateUrl: 'floating-text-filter.component.html',
  styleUrls: ['floating-text-filter.component.scss']
})
export class TextFloatingFilter implements IFloatingFilter<SerializedTextFilter, TextFloatingFilterChange, TextFloatingFilterParams>, AgFrameworkComponent<TextFloatingFilterParams>, AfterViewInit {
  private params: TextFloatingFilterParams;
  public currentValue: string;

  agInit(params: TextFloatingFilterParams): void {
    this.params = params;
    this.currentValue= '';
  }

  valueChanged() {
    this.params.onFloatingFilterChanged({model: this.buildModel()})
  }

  ngAfterViewInit(): void {
    this.valueChanged();
  }

  onParentModelChanged(parentModel: SerializedTextFilter): void {
    if(!parentModel) {
      this.currentValue = '';
    } else {
      console.log(parentModel);
      this.currentValue = parentModel.filter;
    }
  }

  private buildModel(): SerializedTextFilter {
    if(this.currentValue === '') {
      return null
    }
    return {
      filterType: 'text',
      type: 'contains',
      filter: this.currentValue
    }
  }

  public openFilterMenu(): void {
    console.log('open Menu');
  }
}

0 个答案:

没有答案