是否有某种方法可以计算角度网格中的列数

Posted 2023-03-28

【中文标题】是否有某种方法可以计算角度网格中的列数

【英文标题】：Is there some type of way to count the number of columns in an angular grid

【发布时间】：2021-10-14 05:55:12

【问题描述】：

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

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
];

【问题讨论】：

我认为你可以做两件事。要么，数据中始终只有两列，然后通过切换输入/输出数据来操作该数据。或者制作一个管道，它接受 2 个 headerNames 和列，并返回与该 headerNames 匹配的两列。

columnDefs 是一个数组，与任何其他数组一样。你可以用它做你想做的事。只要记住每次更改数组时都重置引用，例如columnDefs = newColDefArray;

【参考方案1】：

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

Events.EVENT_COLUMN_VISIBLE

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

【讨论】：

你有没有一个例子来说明事件是如何在这种情况下工作的？如果不明白，我也在做自己的研究，但没有找到很多例子