Ag-Grid中的过滤器无法与角度9一起使用

Question

我想在我的angular 9应用中为ag-grid-angular实现一个过滤器。但是过滤器永远不会显示。 在互联网上的工作示例中，我可以看到图标设置为:: befor，但是在我的示例中，该图标丢失了。

这是我的代码示例

package.json

"dependencies": {

  "ag-grid-angular": "^23.2.1",
  "ag-grid-community": "^23.2.1",
}

app.module.ts

@NgModule({
  imports: [
   ...
    FormsModule,
    MaterialModule,
    FlexLayoutModule,
    AgGridModule.withComponents([]),
  ],

service-table.component.ts

import {GridOptions} from 'ag-grid-community';

@Component({
  selector: 'app-service-table',
  templateUrl: './service-table.component.html',
  styleUrls: ['./service-table.component.scss']
})

export class ServiceTableComponent implements OnDestroy {
  gridOptions: GridOptions;
  tableData: Observable<Array<VehicleServiceDataResponse>>;

  constructor(private readonly detailsService: DetailsService) {
    this.gridOptions = <GridOptions>{
      enableFilter: true,
      rowSelection: 'multiple',
      // enableSorting: true,
      // enableColResize: true,
      pagination: false,
      animateRows: true,
    };
    this.gridOptions.columnDefs = [
      {
        headerName: 'Id',
        field: 'serviceId',
        width: 50,
        minWidth: 50,
        filter: true,
      },
      {
        headerName: 'Description',
        field: 'description',
        width: 150,
        minWidth: 150,
        filter: 'agTextColumnFilter',
      },
    ];

service-table.component.html

<mat-card class="service-table">
  <mat-card-content>
    <ag-grid-angular
      #agGrid id="myGrid"
      class="ag-theme-alpine grid-table"
      [rowData]="tableData | async"
      [gridOptions]="gridOptions">
    </ag-grid-angular>
  </mat-card-content>
</mat-card>

service-table.component.scss

@import "~ag-grid-community/src/styles/ag-grid.scss";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/_ag-theme-material-mixin.scss";