angular - 有效过滤数据
问题描述
我从服务器收到的示例数据:
tasks= [
{
"id":8,
"title":"Eight",
"how_often":"DS",
"how_important_task":"",
"how_important_improvement":"",
"stakeholder":2,
"project":2
},
{
"id":9,
"title":"Nine",
"how_often":"",
"how_important_task":"",
"how_important_improvement":"",
"stakeholder":2,
"project":2
},
{
"id":21,
"title":"Seventeen",
"how_often":"",
"how_important_task":"",
"how_important_improvement":"",
"stakeholder":2,
"project":2
}
]
我在其中显示这些任务以及我想对其应用的过滤器的模板:
<ion-split-pane>
<ion-grid>
<ion-row padding>
<h5>Filter tasks according to</h5>
</ion-row>
<ion-row padding>
<ion-col>
<ion-list>
<ion-item>
<ion-label>Frequence of performance</ion-label>
<ion-select>
<ion-option *ngFor="let frequency of filer_per_frequency" value="{{frequency.value}}">{{frequency.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list>
<ion-item>
<ion-label>Importance</ion-label>
<ion-select [(ngModel)]="importance">
<ion-option *ngFor="let importance of filer_per_importance" value="{{importance.value}}">{{importance.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list>
<ion-item>
<ion-label>Importance of improvement</ion-label>
<ion-select>
<ion-option *ngFor="let improvement of filer_per_improvement" value="{{improvement.value}}">{{improvement.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list>
<ion-item>
<ion-label>Stakeholder</ion-label>
<ion-select>
<ion-option *ngFor="let stakeholder of filer_per_stakeholder" value="{{stakeholder.value}}">{{stakeholder.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-item-divider color="light"></ion-item-divider>
<ion-list>
<button detail-none (click)="expandItem(task)" ion-item *ngFor="let task of tasks">
<h2>{{task.title}}</h2>
<expandable [expandHeight]="itemExpandHeight" [expanded]="task.expanded">
<hr><p>{{task.how_often | fullform}}</p>
<p>{{task.how_important_task | fullform}}</p>
<p>{{task.why_perform_task}}</p>
<p>{{task.sequence_of_actions}}</p>
</expandable>
</button>
</ion-list>
</ion-grid>
</ion-split-pane>
我应该能够同时应用可用过滤器中的多个过滤器。
我如何在我的组件中处理它,因为管道会降低性能?
解决方案
Angular 开发人员实际上建议不要为此使用管道。您可以在他们的网站上阅读更多相关信息(https://angular.io/guide/pipes#no-filter-pipe)
相反,您应该在加载数据时在组件中这样做。
作为一个非常粗略的例子
// Assumes you load your data in ngOnInit from some service
ngOnInit() {
this.myService.loadData().subscribe(data => {
// Filters out all null items
this.filtered = data.filter((item) => item != null);
})
}
推荐阅读
- java - Java MimeBodyPart 到字节 []
- r - 为总和为 1 的列分配递增的概率
- symfony - Symfony 消息正文编码
- python - 在python中组合成一个平面列表
- prometheus - 在进程退出之前收集未收集的普罗米修斯指标
- javascript - 如何使用 javascript 隐藏和显示特定屏幕宽度的文本?
- python - 我使用开放 AI 健身房的脚本正在泄漏内存
- java - 是否有可能从一个方法返回并让线程仍在为另一个进程运行
- spring-boot - 无法在子对象中获取父对象
- informatica - Informatica 中的间接文件加载错误