Angular TypeScript中如何遍历Kendo网格动态新增的嵌套套娃结构数组

完全可以用递归实现，这种动态无限层级的嵌套结构，递归是最直观且维护成本最低的实现方案。

步骤1：定义TS类型适配结构 #

先声明通用类型匹配你的嵌套数据源结构，方便后续类型校验：

// T 为你最终要获取的目标信息的类型，可根据实际业务字段替换
interface NestedGridItem<T> {
  // 嵌套数组字段，如果你用Kendo原生分组结构，默认字段为items，可直接替换
  array?: NestedGridItem<T>[];
  // 其他分组字段（如分组名称、汇总值等）可按需扩展
  [key: string]: any;
  // 你需要提取的目标信息字段，可改成你实际的字段名
  targetInfo?: T;
}

步骤2：递归函数实现 #

版本1：收集所有目标信息 #

适用于需要把所有层级的目标信息汇总成一个一维数组的场景：

function collectAllTargetInfo<T>(source: NestedGridItem<T>[]): T[] {
  const result: T[] = [];
  for (const item of source) {
    // 当前项存在目标信息则加入结果
    if (item.targetInfo) {
      result.push(item.targetInfo);
    }
    // 存在下一级嵌套数组则递归遍历
    if (item.array?.length) {
      result.push(...collectAllTargetInfo(item.array));
    }
  }
  return result;
}

版本2：通用遍历支持自定义逻辑 #

适用于需要对每个节点做自定义处理（如修改字段、统计数量、层级标记等）的场景：

function traverseGridData<T>(
  source: NestedGridItem<T>[],
  handler: (item: NestedGridItem<T>, level: number) => void,
  currentLevel = 0 // 当前层级参数，自动计算不需要手动传
): void {
  for (const item of source) {
    handler(item, currentLevel);
    if (item.array?.length) {
      traverseGridData(item.array, handler, currentLevel + 1);
    }
  }
}

步骤3：使用示例 #

// 示例1：收集所有目标信息
const allTargets = collectAllTargetInfo(你的Kendo网格数据源变量);
console.log(allTargets);

// 示例2：自定义遍历，打印所有目标信息和所属层级
traverseGridData(你的Kendo网格数据源变量, (item, level) => {
  if (item.targetInfo) {
    console.log(`第${level}层的目标信息：`, item.targetInfo);
  }
});

注意事项 #

• Kendo Grid原生分组后的数据源默认嵌套数组字段为items，如果你没有自定义字段名，把上述代码里的array替换成items即可直接使用
• 常规业务场景下Kendo的分组层级不会超过10层，完全不会出现递归栈溢出问题，只有层级超过1万层时才需要考虑用循环实现替代递归
• 如果需要过滤特定条件的目标信息，只需要在加入结果/处理逻辑的位置加判断条件即可

内容的提问来源于stack exchange，提问作者john