通过选择下拉值过滤角度表数据

【问题标题】：Filter angular table data by selecting dropdown values通过选择下拉值过滤角度表数据
【发布时间】：2023-05-07 04:54:02
【问题描述】：

这里有一个 JSON 数组

demoList = [ 
  { name:"asian003", model:"hyper20", class:"selina0127" },
  { name:"asian003", model:"hyper21", class:"selina0127" },
  { name:"norva", model:"hyper21", class:"gowri.14" },
  { name:"sparks007", model:"NNc22", class:"gowri.14" },
  { name:"asian003", model:"NNc22", class:"selina0127" }
]

这个数组显示在一个使用 Angular 的 HTML 表格中。我想单独添加下拉菜单，例如 name 下拉菜单、 model 下拉菜单、 class 下拉菜单。当我选择下拉值时，我想过滤表记录。

例如，如果我从 name 中选择 asian003 并从 class 中选择 selina0127 并且不选择值 model 下拉菜单，我想将以下结果放入表格预览中

demo1List = [
  {name:"asian003",model:"hyper20",class:"selina0127"},
  {name:"asian003",model:"hyper21",class:"selina0127"},
  {name:"asian003",model:"NNc22",class:"selina0127"}
]

请考虑这个 => 例如，如果我从 name 中选择 asian003 并从 class 中选择 selina0127 并且不选择值 model 下拉列表，我想把下面的结果放到表格预览中

【解决方案1】：

您可以创建一个属性并将其绑定到每个下拉列表。然后在任何下拉更改中，您可以调用 filter_demo_list() 函数：

const demoList = [ 
  { name:"asian003", model:"hyper20", class:"selina0127" },
  { name:"asian003", model:"hyper21", class:"selina0127" },
  { name:"norva", model:"hyper21", class:"gowri.14" },
  { name:"sparks007", model:"NNc22", class:"gowri.14" },
  { name:"asian003", model:"NNc22", class:"selina0127" }
]

public table_data;
public selected_name;
public selected_class;
public selected_model;

filter_demo_list() {
  this.table_data = demoList;
  if (this.selected_name) this.table_data.filter((item)=> item.name === this.selected_name);
  if (this.selected_class) this.table_data.filter((item)=> item.class  === this.selected_class);
  if (this.selected_model) this.table_data.filter((item)=> item.model === this.selected_model);
}

【讨论】：

请考虑这个 => 例如，如果我从 name 中选择 asian003 并从 class 中选择 selina0127 并且不选择值 model 下拉列表，我想把下面的结果放到表格预览中
我的代码涵盖了该逻辑。可以看到，如果 this.selected_model 没有被选中，最后的 if 条件不会被执行， model 的过滤也不会被应用。
我做了一些修改。代码有效。

分享于2023年05月08日 angular arrays filter json typescript 问答