Angular 10升级搞砸了ag-grid-angular下拉look-n-feel

Question

我的ag-grid-angular版本已经升级到24.0.0。作为Angular 10升级的一个过程(npm update --all)。在功能、角度材质组件look-n-feel和我正在使用的第三方库(例如，ag- angular -grid、Highchart、splitter、ag-grid等)方面，一切都运行得很好。

但不知何故，我失去了银角网格下拉菜单的默认外观(编辑网格- cellEditor：'agSelectCellEditor')

下面是升级前后的look-n-feel对比，以便更清晰。

​

angular 10升级后的版本(package.json)：

"@angular-devkit/build-angular": "^0.1001.1",
"@angular/animations": "^10.1.2",
"@angular/cdk": "^10.2.1",
"@angular/common": "^10.1.2",
"@angular/compiler": "^10.1.2",
"@angular/core": "^10.1.2",
"@angular/flex-layout": "^10.0.0-beta.32",
"@angular/forms": "^10.1.2",
"@angular/http": "^7.2.16",
"@angular/material": "^10.2.1",
"@angular/platform-browser": "^10.1.2",
"@angular/platform-browser-dynamic": "^10.1.2",
"@angular/router": "^10.1.2",
"@types/jest": "^26.0.14",
"ag-grid-angular": "^24.0.0",
"ag-grid-community": "^24.0.0",

感谢你的帮助。

Answer 1

将ag和ag主题材料css文件导入到styles.scss解决了这个问题。感谢Chris的指导和文档。https://www.ag-grid.com/javascript-grid-themes-v23-migration/

将这些文件导入到"styles.scss“文件中，如下所示，就是这样！

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-material.css";

或

@import "~ag-grid-community/src/styles/ag-grid";
@import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat";