Фильтр ngFor не возвращает сообщение об отсутствии элементов в дочернем компоненте - PullRequest
Новая
       65

Фильтр ngFor не возвращает сообщение об отсутствии элементов в дочернем компоненте

0 голосов
/ 03 февраля 2019

У меня есть родительская коллекция, в которой есть коллекция дочерних компонентов. 

[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>

filter / pipe: 

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;

}

1 Ответ

0 голосов
/ 03 февраля 2019

Вы можете попробовать следующее: 

<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>
...