arrayer - Filtrera angular-tabelldata genom att välja värden från rullgardinsmenyn

Här har jag en JSON-array

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" }
]

Denna array visas i en HTML-tabell med Angular. Jag vill lägga till dropdowns separat såsom name dropdown, model dropdown, class dropdown. När jag väljer värden i dropdownmenyerna vill jag filtrera tabellposter.

Till exempel, om jag väljer asian003 från name och selina0127 från class och inte väljer värdet i model rullgardinsmenyn, vill jag få följande resultat i tabellförhandsgranskningen

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

Svar #1

Du kan skapa och binda en egenskap till varje rullgardinsmeny. Sedan kan du vid varje ändring i en rullgardinsmeny kalla på filter_demo_list()-funktionen:

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);
}