如何在Angular中创建动态过滤管道(组合标准)

Question

我打算在这段代码中实现的是通过选择的过滤器打印卡片。例如：

类别为

流派：

• 浪漫
• 惊悚片
• 幻想

状态：

• 挂起
• 继续
• 间断

所以如果选择了浪漫、惊悚、待定，它将只显示这些卡片。

到目前为止，我所取得的成就是它只显示了一个项目。

这是我的管道上的代码

transform(Projects: Project[], criteriaValue: any, properties: string[]): any[] {
if (!Projects) return [];
if (!criteriaValue) return Projects;
debugger;
return Projects.filter(item => {
var itemFound: Boolean;
for (let i = 0; i < properties.length; i++) {
if (item[properties[i]].toLowerCase().indexOf(criteriaValue.toLowerCase()) !== -1) {
itemFound = true;
break;
}
}
return itemFound;
});
}

html:

<div class="btn-row">
<button mat-stroked-button aria-label="large icon" (click)="filterCriteria = 'Romance'"  > Romance</button>  
<button mat-stroked-button aria-label="large icon"  (click)="filterCriteria = 'Thriller'" > Thriller</button> 
<button mat-stroked-button aria-label="large icon"  (click)="filterCriteria = 'Fantasy'" > Fantasy</button> 
<button mat-stroked-button aria-label="large icon"  (click)="filterCriteria = 'pending'" > pending</button> 
<button mat-stroked-button aria-label="large icon"  (click)="filterCriteria = 'Hiatus'" > Hiatus</button> 
</div>
<li *ngFor="let novel of (novelList | Searchfilter: searchValue | criteriafilter:filterCriteria:['Genre','Status']  )"> 
<li>[[novel.title]]</li>

我不完全确定该在我的组件上放什么，所以它做了我打算做的事情。提前感谢您的帮助：D

编辑：

这是我到目前为止所做的，但我在上遇到了一个错误。toString

管道：

transform(Projects: Project[], criteriaValue: [], properties: []): any {
criteriaValue.forEach((name, index) => {
if (name) {
Projects = Projects.filter((item) => {
return (item[properties[index]]
.toString()
.toLowerCase()
.indexOf(name.toString().toLowerCase()) !== -1)
});
}
});
return Projects;
}

我将我的html*ngFor更改为：

<div  fxFlex= " (100/3) %" fxFlex.xs="100%" fxFlex.sm = 33% *ngFor="let project of (cardList | Searchfilter: searchValue | criteriafilter: [sectorCriteria, timeHorCriteria] : ['sectors','time_horizon']  )"> 

正如你所看到的，我正试图将标准绘制到数组中，但我似乎做不好。

任何形式的帮助都将不胜感激。

错误是

类型'never'上不存在属性'toString'。

Answer 1

我只添加了像这样的任何[]：

transform(Projects: Project[], criteriaValue: any[], properties: any[]): any {
criteriaValue.forEach((name, index) => {
if (name) {
Projects = Projects.filter((item) => {
return (item[properties[index]]
.toString()
.toLowerCase()
.indexOf(name.toString().toLowerCase()) !== -1)
});
}
});
return Projects;
}