4

已解决：原来我正在导入不正确的 CSS，这会导致一些非常严重的问题，请阅读答案以获取更多详细信息

实施 ag-grid 后，数据显示，但我根本无法滚动。

我在这里做了一个stackblitz：https ://stackblitz.com/edit/angular-ytr1jj 。stackblitz 按预期工作，但由于某种原因，完全相同的代码无法在我的应用程序中滚动。在此处输入图像描述

我尝试了多种渲染行的方法。我尝试弄乱 CSS 以查看是否有任何东西导致滚动条重叠。 栏无法访问

到目前为止没有运气。我认为这可能与“指针事件”有关......

更新：我认为虚拟滚动需要在行上捕获鼠标事件，并且由于某种原因鼠标事件没有被捕获，因此无法滚动

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 600px;"
  class="ag-theme-balham"
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  >
</ag-grid-angular>


columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 }
  ];

更新 2：如果我设置pointer-events: none为 ，我可以让滚动条滚动.ag-center-cols-viewport。html 似乎在滚动时更新，并且行索引行 ID 等在滚动时更新，但是表视图似乎没有显示当前插入到 ref="ag-center-cols-viewport 中的行"（它们出现在 html 中但不可见）

4

1 回答 1

4

回答

好吧，这有点荒谬，但它就是这样

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

GOOD
@import 'ag-grid-community/dist/styles/ag-grid.css';
@import 'ag-grid-community/dist/styles/ag-theme-material.css';

再次检查我的 package.json 后，我注意到我在依赖项下有 3 个 ag-grid

"ag-grid",
"ag-grid-angular",
"ag-grid-community"

我导入的 CSS 来自旧版本的"ag-grid". "ag-grid"从 package.json 中删除后，我导入了正确的 CSS，一切都立即生效......

最终好的代码

// package.json
    "ag-grid-angular": "^20.0.0",
    "ag-grid-community": "^20.0.0",

// _vendor.scss where I import most my node_modules css

    // @import "~ag-grid/dist/styles/ag-grid.css";
    // @import "~ag-grid/dist/styles/ag-theme-material.css";
    @import 'ag-grid-community/dist/styles/ag-grid.css';
    @import 'ag-grid-community/dist/styles/ag-theme-material.css';
于 2019-01-17T21:47:31.743 回答