有没有某种方法可以计算 angular 网格中的列数

Question

我有一个 angular 网格，希望能够控制一次显示多少列，例如，我希望一次显示的最大列数为 5，即使有超过 5 列，如果用户试图显示超过 5 列，他们将不会被允许。在下面的示例代码中，假设我一次只想显示 2 列，所有列都在 select 菜单中，这样我就可以切换我查看的 2 列，这可以通过过滤或通过某种类型来完成javascript/typescript

中的函数

html

<div>
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
    [columnDefs]= "columnDefs" >
  </ag-grid-angular>
</div>

组件

import { Component } from '@angular/core';
import { GridRes } from './gridres.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ag-custom';


  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: "Porsche", model: "Boxter", price: 72000}
];

}

Answer 1

只要列在 AG Grid 中可见，它就会触发一个事件：

Events.EVENT_COLUMN_VISIBLE

那么你为什么不订阅那个事件然后看看它是否会导致你有超过 2 个可见的列；如果是，则将现有的可见列替换为事件参数中引用的列？

有没有某种方法可以计算 angular 网格中的列数

Is there some type of way to count the number of columns in an angular grid

javascript

typescript

ag-grid

angular