如何让自定义选择浮动过滤器成为 ag-grid 角度中列的全宽答案

【问题标题】：How to get custom select floating filter to be full width of column in ag-grid angular如何让自定义选择浮动过滤器成为 ag-grid 角度中列的全宽
【发布时间】：2020-05-30 13:30:05
【问题描述】：

我似乎无法使用 angular 8 中的 ag-grid 使自定义浮动过滤器组件成为列的全宽。我的组件有以下模板和 css：

@Component({
    template: `
        <select [(ngModel)]="selectedOption" (ngModelChange)="valueChanged()">
            <option value="all">All</option>
            <option value="true">True</option>
            <option value="false">False</option>
        </select>`,
    styles: ['select {width: 100%;}']
})

当我查看 chrome 中的元素时，过滤器组件似乎没有继承其父组件的宽度。 ag-grid 是否提供了一种简单的方法来做到这一点，还是有另一种使用 css 的方法？

【问题讨论】：

标签： css angular ag-grid

【解决方案1】：

我最终不得不从 dom 中查询我的输入元素，然后我得到了输入元素的父元素并将宽度设置为“100%”，这对我有用。

因此，在您的“onParentModelChanged”函数中添加以下新行：

onParentModelChanged(parentModel: any) {
       document.querySelector('#YOUR_FLOATING_FILTER_INPUT_ID').parentElement.style.width = '100%'; // <- This is the new line
       // When the filter is empty we will receive a null value here
       if (!parentModel) {
           this.currentValue = null;
       } else {
           this.currentValue = parentModel.filter;
       }
   }

不要忘记将 id 添加到输入元素。我希望有更好的方法来做到这一点，但现在这就是我要做的。

您还可以添加一个标志来检查它是否已被设置，这样您就不会一直重置该值。

【讨论】：