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

Question

我似乎无法使用 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 的方法？

Answer 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 添加到输入元素。 我希望有更好的方法来做到这一点，但现在这就是我要做的。

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