Как использовать поисковую трубу с группой труб по дате - PullRequest
Новая
       13

Как использовать поисковую трубу с группой труб по дате

0 голосов
/ 01 октября 2019

У меня есть список данных, сгруппированных по дате, но я бы хотел использовать поисковую трубу для определенного ключа в моем списке данных.

однако, когда я применяю свой поисковый фильтр, он работает, но оставляетОтображаются даты группировки.

Как сделать так, чтобы даты группировки не отображались, если они не совпадают с полем поиска?

Для поиска по имени Gene,

Вот проблема:

       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])));

  }
 }

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>

Stackbiltz demo

1 Ответ

1 голос
/ 01 октября 2019

Если вы поместите игроков и элементы 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>
...