Angular中使用TypeScript实现动态列过滤的技术问询

你的核心需求是让过滤方法能根据传入的动态字段参数复用，当前的设想代码有个关键错误：v.field是直接访问对象名为field的属性，而非你传入的动态字段名，需要改用方括号语法v[field]来访问动态属性。

同时，为了提升TypeScript的类型安全性，建议用泛型替代any，避免类型丢失。以下是完整的实现方案：

1. 基础可复用版本 #

先修正属性访问的问题，保留基本功能：

adcionarLista(selecionados: any[], list: { value: any[] }, field: string) {
  const dados = [];
  for (const select of selecionados) {
    // 方括号语法访问动态字段
    dados.push(list.value.filter((v) => v[field] === select));
  }
  return dados;
}

2. 类型安全的泛型版本 #

用泛型约束字段和数据类型，编译阶段就能校验合法性：

// T: 列表项的具体类型；K: T的合法属性名
adcionarLista<T, K extends keyof T>(selecionados: T[K][], list: { value: T[] }, field: K) {
  const dados: T[][] = [];
  for (const select of selecionados) {
    dados.push(list.value.filter((v) => v[field] === select));
  }
  return dados;
}

泛型说明 #

• K extends keyof T：限制传入的field必须是列表项类型T的存在属性，避免传入不存在的字段导致运行时错误
• selecionados: T[K][]：确保选中值的类型和目标字段的类型一致，比如字段是age（number类型），选中值必须是number数组

使用示例 #

// 定义列表项类型
type Usuario = {
  id: number;
  name: string;
  age: number;
};

// 测试数据
const usuarioList = {
  value: [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob", age: 30 },
    { id: 3, name: "Alice", age: 35 },
  ],
};

// 根据name字段过滤
const selecionadosNomes = ["Alice"];
const resultadoPorNome = adcionarLista(selecionadosNomes, usuarioList, "name");

// 根据age字段过滤
const selecionadosIdades = [30];
const resultadoPorIdade = adcionarLista(selecionadosIdades, usuarioList, "age");

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