Angular 10 次升级搞砸了 ag-grid-angular 下拉外观

Question

我的ag-grid-angular版本已经升级到24.0.0。作为 Angular 10 升级的过程 (npm update --all)。在功能、angular material 组件外观和我正在使用的第三方库（例如 ag-angular-grid、Highchart、splitter、ag-grid 等）方面一切正常。 )

但不知何故我失去了 ag-angular-grid 下拉菜单的默认外观（编辑网格 - cellEditor: 'agSelectCellEditor'）

为了更清楚起见，这里是升级前后的外观对比。

angular10 升级后的版本(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-grid 和 ag-theme-material 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";

Angular 10 次升级搞砸了 ag-grid-angular 下拉外观

Angular 10 upgrade messed up ag-grid-angular dropdown look-n-feel

ag-grid

ag-grid-angular

angular10