我有了孩子组件的集合父集合。
[parent]
[child]
[child]
[parent]
[child]
我对ngFor过滤器的孩子,
当我过滤器,它过滤数据,但我认为最终看起来是这样的:
[parent]
[parent]
[child]
反正是有过滤掉父如果孩子有没有项目吗?或者说,有它做这样的事情:
[parent]
No Items Found!
[parent]
[child]
感谢您的任何帮助,只是学习角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>