Использование * ngFor с asyn c pipe с условным отображением в html в angular8 - PullRequest
Новая
       3

Использование * ngFor с asyn c pipe с условным отображением в html в angular8

1 голос
/ 06 мая 2020

. html

<ng-container *ngFor="let contact of listContact | async; let index = index;">
      <h6 class="title" *ngIf="contact && contact['type']">
        {{contact['type']}}
        </h6>
   <div> {{contact['id']}}</div>
 </ng-container>

listContact, наблюдаемый объект содержит: - 

[
  {
    "id": "u-8cf4161b-240f-5d7a-b5df-0522739c62d9",
    "type": "Peoples"
  },
  {
    "id": "u-0580ff64-c959-5690-bc54-16c43b28065d",
    "type": "Peoples"
  },
  {
    "id": "u-44e5a40a-a367-55e0-baf1-1eacccafe5f2",
    "type": "Teams"
  }
]

Ожидаемый (желаемый) html вывод: - 

Peoples

u-8cf4161b-240f-5d7a-b5df-0522739c62d9
u-0580ff64-c959-5690-bc54-16c43b28065d

Teams
u-44e5a40a-a367-55e0-baf1-1eacccafe5f2

Как добавить проверку, что если предыдущий {{contact['type']}} для l oop совпадает с текущим {{contact['type']}} для l oop, то не добавлять {{contact['type']}} в поле зрения. title зависит от {{contact['type']}} и тоже не должен повторяться, пока предыдущий {{contact['type']}} не будет отличаться от текущего.

Как справиться с этим в html для этой проблемы?

Ответы [ 2 ]

2 голосов
/ 06 мая 2020

Вы можете создать groupBy pipe 

@Pipe({ name: "groupBy" })
export class GroupByPipe implements PipeTransform {
  transform(value: Array<any>, field: string): Array<any> {
    const groupedObj = value.reduce((prev, cur) => {
      if (!prev[cur[field]]) {
        prev[cur[field]] = [cur];
      } else {
        prev[cur[field]].push(cur);
      }
      return prev;
    }, {});
    return Object.keys(groupedObj).map(key => ({
      key,
      value: groupedObj[key]
    }));
  }
}

и использовать в html как 

<ng-container *ngFor="let contact of listContact | groupBy:'type'; let index = index;">
      <h6 class="title">
        {{contact.key}}
        </h6>
   <div *ngFor="let value of contact.value">{{value.id}}</div>
 </ng-container>

Stackbliz https://stackblitz.com/edit/angular-groupby-pipe ?

2 голосов
/ 06 мая 2020

Правильный способ справиться с этим - это сгруппировать ваши предметы по категориям, например Peoples, Teams, et c.

Но если вы хотите проверить свое состояние в шаблоне, вы можете сохранить результат listContact | async извлеките в переменную, а затем используйте index на нем: 

<ng-container *ngFor="let contact of listContact | async as contacts; let index = index;">
  <h6 class="title" *ngIf="contact.type && (!contacts[index - 1] || contacts[index - 1].type !== contacts[index].type)">
     {{contact.type}}
  </h6>
  <div> {{contact.id}}</div>
</ng-container>

Ng-run Пример

...