如何讓自定義選擇浮動過濾器成為 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 添加到輸入元素。 我希望有更好的方法來做到這一點，但現在這就是我要做的。

您還可以添加一個標志來檢查它是否已經設置，這樣您就不會一直重置該值。