Angular 动态复选框过滤实现

Question

提前致谢

我的要求是制作一个带有名称搜索（完成）和复选框的自定义过滤器，通过将复选框值与行[[=33匹配来过滤Table的行（对象数组） =]]（字符串数组）和 returns 行，如果标签数组由复选框中的值组成，
问题是过滤器（复选框）是从数据库获得的并动态填充因此我不能使用 ngmodel

非常感谢任何实现想法，我已经看到很多关于静态过滤器和一些使用管道的过滤器的问题，但是如何处理动态情况

到目前为止我的实施，
模板：

<div id="searchByTag" *ngFor="let tag of tagList">
   <input
     type="checkbox"
     (change)="filterByTags(tag, $event)"
   />{{ tag }}
 </div>

TS:

rows=[{},{}]  //from db
temp = rows    // copied when getting row from db

filterByTags(FilterTag, event) {
    if (event.target.checked) {
      const filteredRow = this.rows.filter((obj) => {
          return tag.includes(FilterTag.toLowerCase());
      });
      this.rows = filteredRow;
    } else {
      return (this.rows = this.temp);
    }
  }

行对象：

{ 
    "xx":'yyy',
    ....,
    "tags" : [
        "org", 
        "pcb",

    ]
}

~~另外一个问题是过滤技术目前returns只有一行符合条件~~（清除），但主要是标签的动态实现

Answer 1

你可以有 ngModel:

如果这是你的复选框 = ["org", "pcb"];

那么你只需要一条记录来绑定复选框值:

checkboxes: {[id: string]: {value: any}} = {};
for(let tag of this.tags) {
   this.checkboxes[tag] = {value: false}
}

现在在您的模板中：

<input type="checkbox" *ngFor="let item of tags" 
  [(ngModel)]="checkboxes[item].value">

你可以在这个 stackblitz 中看到这个： stackblitz

Angular 动态复选框过滤实现

Angular dynamic checkbox Filtering implementation

javascript

angular-filters

angular