Angular列过滤异常：过滤后重新打开列无法显示问题求助

DevOps 小满

2026-7-15

解决Angular列过滤隐藏后无法恢复显示的问题

问题根源

你当前的代码直接对tableTotalDisplay1执行filter操作，隐藏列时会把对应列从这个数组里彻底移除。再次勾选要显示时，数组里已经没有该列的数据了，filter找不到目标列，所以无法恢复显示。

修复思路

必须保留一份完整的原始列数据，不能直接修改它。每次需要更新显示列时，都基于这份原始数据，结合列的勾选状态来重新生成要显示的列数组。

具体修改步骤

在组件里新增两个变量，分别存储原始列数据和每列的勾选状态：

// 存储所有列的原始数据，初始化后不要修改它
private originalColumns: any[] = [];
// 存储每列的勾选状态，key是列名，value是是否显示
checkedColumns: { [colName: string]: boolean } = {};

在组件初始化时（比如ngOnInit方法里），把原始列数据存好，并初始化所有列的勾选状态为显示：

ngOnInit(): void {
  // 假设this.tableTotalDisplay1一开始是所有列的数据
  this.originalColumns = [...this.tableTotalDisplay1];
  // 初始化所有列都显示
  this.originalColumns.forEach(col => {
    this.checkedColumns[col.COL_NAME] = true;
  });
}

修改onAllCheckBox方法，基于原始数据和勾选状态来更新显示列：

onAllCheckBox(checkButton: any) {
  const colName = checkButton.NAME;
  // 更新当前列的勾选状态
  this.checkedColumns[colName] = checkButton.STATUS;
  
  // 从原始数据里筛选出需要显示的列
  this.tableTotalDisplay1 = this.originalColumns.filter(col => {
    return this.checkedColumns[col.COL_NAME];
  });

  console.log('当前显示的列:', this.tableTotalDisplay1);
}