Angular 如何按日期将搜索管道与管道组一起使用

我有一个按日期分组的数据列表，但我想在数据列表中的特定键上使用搜索管道

但是，当我应用搜索过滤器时，它会工作，但会保留显示的分组日期

如果分组日期与搜索字段不匹配，如何使其不显示

搜索名字基因

问题是：

       Team : 2019-09-18
       Gene
       Team : 2019-20-18
       Team : 2019-18-18

我想要的是：

      Team : 2019-09-18
      Gene

列表：

 players  = [{name: 'Gene', team: 'team alpha', date: '2019-09-18T16:45:42' },
             {name: 'Steve', team: 'team gamma', date: '2019-09-18T15:45:42'},
             {name: 'George', team: 'team beta', date: '2019-20-18T12:45:42'},
             {name: 'Paula', team: 'team beta', date: '2019-18-18T15:45:42'},
             {name: 'Jhon', team: 'team gamma', date: '2019-09-18T15:45:42'}];

   @Pipe({name: 'groupBy'})
    export class GroupByPipe implements PipeTransform {
      transform(collection: Array<any>, property: string): Array<any> {
        if(!collection) {
        return null;
     }

const mappedCollection = collection.map(player => ({
                           ...player, 
                           date: player.date.split('T')[0]
                         }));

const groupedCollection = mappedCollection.reduce((previous, current)=> {
    if(!previous[current[property]]) {
        previous[current[property]] = [current];
    } else {
        previous[current[property]].push(current);
    }

    return previous;
}, {});

   return Object.keys(groupedCollection).map(key => ({ key, value: 
groupedCollection[key] }));
 }
}

 @Pipe({
  name: 'searchPipe',
 })
  export class SearchPipe implements PipeTransform {
    public transform(value, keys: string, term: string) {

  if (!term) return value;
  return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
 }

}

按日期划分的管道组：

 players  = [{name: 'Gene', team: 'team alpha', date: '2019-09-18T16:45:42' },
             {name: 'Steve', team: 'team gamma', date: '2019-09-18T15:45:42'},
             {name: 'George', team: 'team beta', date: '2019-20-18T12:45:42'},
             {name: 'Paula', team: 'team beta', date: '2019-18-18T15:45:42'},
             {name: 'Jhon', team: 'team gamma', date: '2019-09-18T15:45:42'}];

   @Pipe({name: 'groupBy'})
    export class GroupByPipe implements PipeTransform {
      transform(collection: Array<any>, property: string): Array<any> {
        if(!collection) {
        return null;
     }

const mappedCollection = collection.map(player => ({
                           ...player, 
                           date: player.date.split('T')[0]
                         }));

const groupedCollection = mappedCollection.reduce((previous, current)=> {
    if(!previous[current[property]]) {
        previous[current[property]] = [current];
    } else {
        previous[current[property]].push(current);
    }

    return previous;
}, {});

   return Object.keys(groupedCollection).map(key => ({ key, value: 
groupedCollection[key] }));
 }
}

 @Pipe({
  name: 'searchPipe',
 })
  export class SearchPipe implements PipeTransform {
    public transform(value, keys: string, term: string) {

  if (!term) return value;
  return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
 }

Html:

  <input [(ngModel)]="search">
     <ul>
      <div *ngFor="let player of players | groupBy:'date'"> Team : 
  {{player.key}}
      <li *ngFor="let eachplayer of player.value | searchPipe: 'name': search">
  {{eachplayer.name}}
   </li>
</div>

小组：
{{player.key}

{{eachplayer.name}

---

如果您将玩家和li项目放在一个容器中，并且仅在第一个索引上显示玩家密钥，您将获得想要的结果：

<input [(ngModel)]="search">
<ul>
<div *ngFor="let player of players | groupBy:'date'"> 
    <ng-container  *ngFor="let eachplayer of player.value | searchPipe: 'name': search; first as isFirst">
    <span *ngIf="isFirst"> Team : {{player.key}}</span>
    <li>
      {{eachplayer.name}}
   </li>
   </ng-container>
 </div>
</ul>

团队：{{player.key}

{{eachplayer.name}