angular - ngFor 过滤器在子组件中返回 no items 消息
问题描述
我有一个包含子组件集合的父集合。
[parent]
[child]
[child]
[parent]
[child]
我在 ngFor 上为孩子们设置了一个过滤器,
当我过滤时,它会过滤数据,但我的视图最终看起来像这样:
[parent]
[parent]
[child]
如果孩子没有物品,是否有办法过滤掉父母?或者,让它做这样的事情:
[parent]
No Items Found!
[parent]
[child]
感谢您的帮助,刚刚学习 Angular 7。
html:
<div style="margin-top: 30px;">
<div *ngFor="let organization of column.boardColumnWorkItems">
<div class="row">
<div class="col-sm-4 organization-row">
{{organization.name}}
</div>
</div>
<app-board-column-tile *ngFor="let workItem of organization.workItems | workItemFilter:filterTerm"
[boardColumnWorkItem]="workItem">
</app-board-column-tile>
</div>
</div>
过滤器/管道:
transform(workItems: any, filterTerm: any): any {
console.log("WorkItemFilterPipe: " + filterTerm);
//Check if filter term is undefined
if (filterTerm === undefined)
return workItems;
//Return the filtered list of workitems
this.filteredWorkItems = workItems.filter(function (workItem) {
return workItem.filterData.includes(filterTerm.toLowerCase());
})
console.log(this.filteredWorkItems.length);
return this.filteredWorkItems;
}
解决方案
您可以尝试如下:
<ng-container *ngIf="organization.workItems | workItemFilter:filterTerm as filteredWorkItems">
<app-board-column-tile *ngFor="let workItem of filteredWorkItems"
[boardColumnWorkItem]="workItem">
</app-board-column-tile>
<h3 *ngIf="filteredWorkItems.length === 0">No filtered results!</h3>
</ng-container>
推荐阅读
- javascript - 想要将 gobal 过滤器放在 primeNg 表组件之外
- r - 如何在 R 中获得凝聚聚类的热图?
- javascript - 无法从容器连接到数据库
- azure-cosmosdb - 逻辑应用 > CosmosDB 错误从文档中提取的 PartitionKey 与标题中指定的不匹配
- python - 根据特定测量对股票进行排名
- spring-boot - Spring boot + Rabbit MQ 并行处理消息
- flutter - Flutter-web:url_launcher_web 未在浏览器中启动电子邮件
- javascript - 等待 API 请求结束以调用另一个函数
- python - 多个熊猫数据框中列中值的频率
- apache-kafka - 带有身份验证标头的 Kafka REST API 源连接器