Показывать только определенный элемент ngIf - PullRequest
Новая
       8

Показывать только определенный элемент ngIf

0 голосов
/ 08 ноября 2018

Я создал компонент toggle-show-more-items, представляющий собой кнопку, отображающую больше значений. Но если у меня есть несколько toggle-show-more-items компонентов, он открывает их все. Как я могу настроить таргетинг на конкретный предмет, ниже я покажу вам, как я это сделал. 

<div *ngFor="let bucketName of bucketNames" [hidden]="!getBucketsWithValues(bucketName.criterium).length">
  <ng-container *ngIf="bucketName.toon_maximaal && open">
    <div *ngFor="let bucket of getBucketsWithValues(bucketName.criterium) | orderBy:'key'; let ndx = index">
         <osi-checkbox *ngIf="ndx >= bucketName.toon_maximaal" 
            [model]="filter[bucketName.criterium][bucket.key].checked" 
            (change)="onFilterChange(filter[bucketName.criterium][bucket.key], $event.checked)">

            <osi-li-body class="osi-black-87">{{ bucket.key }}&nbsp;({{ bucket.doc_count }})</osi-li-body>

         </osi-checkbox>
    </div>
  </ng-container>

  <div *ngIf="bucketName.toon_maximaal && getBucketsWithValues(bucketName.criterium).length > bucketName.toon_maximaal">
    <toggle-show-more-item [openTitle]="'OWC.SHOW_MORE' | translate | uppercase" [closeTitle]="'OWC.SHOW_LESS' | translate | uppercase" 
         [padding]="false" (onToggleClick)="showMore($event)"></toggle-show-more-item>
  </div>
</div>

И это метод showMore: 

showMore(open) {
   this.open = open;
}

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете использовать индексы

Добавьте свойство open к каждому элементу массива bucketNames, чтобы вы могли установить, находится ли элемент в «режиме showMore» или нет.

Вместо 

*ngFor="let bucketName of bucketNames"

Использование 

*ngFor="let bucketName of bucketNames; let i = index"

Затем измените функцию showMore: 

(onToggleClick)="showMore($event, i)"

И адаптируйте его в своем тс: 

showMore(open, index) {
   this.bucketNames[index].open = open; // Access only the element at given index
}

Вам также нужно будет изменить свой компонент * ngIf: 

<ng-container *ngIf="bucketName.toon_maximaal && bucketName.open">

В качестве альтернативы компонентному методу вы можете также установить open в шаблоне. 

(onToggleClick)="bucketNames[i].open = $event"
...