Question

预先感谢

我的要求是使用名称明智的搜索（完成）和复选框创建一个自定义过滤器，该过滤器通过将复选框的值与Row ['tags']（字符串的数组）进行匹配来过滤表的Rows（对象的数组）并返回如果标签数组由复选框中的值组成，则为行，
问题是，filters（checkbox）是从DB获取的，并且是动态填充的，因此我不能使用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",

    ]
}

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

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

角动态复选框过滤实现

1 个答案: