Angular: как скрыть / показать элементы и изменить данные для popover при изменении ширины столбца? - PullRequest
Новая
       14

Angular: как скрыть / показать элементы и изменить данные для popover при изменении ширины столбца?

0 голосов
/ 02 ноября 2019

Я пытаюсь выяснить, как решить проблему с скрытием / отображением элементов при изменении размера столбца.

enter image description here

Вы можете видеть - есть некоторый аватар пользователя и круглый значок с количеством других (скрытых) пользователей. После щелчка по нему появляется поповер:

enter image description here

Чего я хочу достичь:

  1. Когда ширина столбца изменяется,больше / меньше аватаров, и число в круглом значке изменяется (если все аватары все еще не видны)
  2. Данные для всплывающих окон изменены и соответствуют отображаемой информации

enter image description here

Давайте перейдем к коду (данные жестко закодированы в данный момент):

Столбец, о котором я говорил: 

<div class="fixed-size-column-130">
  <div class="d-flex align-items-center flex-row">
    <div class="profile-image-holder d-flex justify-content-center align-items-center m-r-5">
      <i class="cc-icon cc-icon"></i>
    </div>
    <div *ngIf="diary.Approvers.length > 1" class="round-badge cc-grey-100-bg cc-grey-200-txt">
      <a [ngbPopover]="popContent" placement="right">+{{diary.Approvers.length - 1}}</a>
      <ng-template #popContent><app-approvers [approvers]="testApprovers"></app-approvers></ng-template>
    </div>
  </div>
</div>

Popover: 

<div *ngFor="let user of approvers">
  <app-approver [user]="user"></app-approver>
</div>

Один пользователь в поповере: 

<div class="d-flex align-items-center p-3 border-bottom">
 <a class="profile-image-holder d-flex justify-content-center align-items-center mr-3">
 </a>
 <div class="d-flex flex-column">
  <p class="mb-0 small-txt bold">{{user.firstName}}</p>
  <p class="mb-0 small-txt">{{user.lastName}}</p>
 </div>
</div>

Я не знаю, как с этим справиться. Я думал о директиве ngIf, но IMO должен быть лучший способ достичь моей цели. Может кто-нибудь помочь мне, пожалуйста?

STACKBLITZ пример: https://stackblitz.com/edit/angular-gjunnt-ykjiqy

1 Ответ

0 голосов
/ 03 ноября 2019

Подсчитайте, сколько элементов может занимать в контейнере. и создать подмассив профиля на основе этого значения. Вызовите то же самое в окне resize 

@HostListener("window:resize", ["$event"])
onResize(event) {
    this.totalOccupy();
}

ngOnInit() {
    this.totalOccupy();
}

totalOccupy(): any {
    let space = Math.floor(
        this.divToMeasureElement.nativeElement.offsetWidth / this.itemWidth
    );
    this.displayApprovers = this.testApprovers.slice(0, space);
}

Полное решение: stackblitz

Проверьте разницу, изменив размер окна вывода

...