如何实现HTML按钮双条件数据过滤？（Angular+TypeScript）

1. 修改TypeScript的changeFilter函数 #

当前函数仅支持单个过滤条件，需要调整参数结构以支持多条件过滤，推荐两种实现方式：

方式一：直接支持多条件对象（更简洁） #

将函数参数改为接收键值对对象，每个键对应字段名，值对应过滤值：

changeFilter(filters: Record<string, string>) {
  this.filteredtable = true;
  // 直接使用传入的多条件过滤对象
  const filter = {...filters};
  // 保留你原有的后续逻辑（比如处理title、activeColDef等）
  // 示例：如果需要将过滤条件应用到表格数据
  // this.tableData = this.originalData.filter(item => 
  //   Object.entries(filter).every(([key, value]) => item[key] === value)
  // );
}

方式二：兼容原有单条件调用（保持向后兼容） #

如果需要保留原有的单条件调用方式，可以通过参数类型判断实现兼容：

changeFilter(fieldOrFilters: string | Record<string, string>, term?: string) {
  this.filteredtable = true;
  let filter: Record<string, string> = {};

  // 处理原有单条件调用逻辑
  if (typeof fieldOrFilters === 'string' && term) {
    filter[fieldOrFilters] = term;
  } 
  // 处理多条件调用逻辑
  else if (typeof fieldOrFilters === 'object') {
    filter = {...fieldOrFilters};
  }

  // 保留你原有的后续逻辑（比如处理title、activeColDef等）
}

2. 更新HTML按钮的点击事件 #

修改按钮的(click)绑定，传入包含两个条件的对象：

<button role="button" name="atCloudBttn" class="btn btn-primary" (click)="changeFilter({Status: 'Pending', IO: 'Yes'})">

注意事项 #

• 修正函数名大小写：你原代码中按钮调用的是changeFilter（小写c），但TypeScript函数写的是ChangeFilter（大写C），需要统一命名。
• 如果原有代码中filter变量用于全局存储过滤条件，记得将filter赋值给对应的全局变量（比如this.currentFilter = filter），确保表格能读取到多条件过滤规则。

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