Скрыть/показать отдельные элементы внутри ngFor

Мне нужно показать/скрыть часть компонента. Вот пример Angular2.

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="hideme = !hideme">Click</a>
  <div [hidden]="hideme">Hide</div>
</li>

Предположим, что у нас есть только 2 элемента. Проблема здесь в том, что она работает на обоих элементах. Таким образом, он скрывает и показывает div в компонентах. Это может быть идеально, если бы у нас было что-то вроде этого:

<li *ngFor=" #item of items " >
   <a href="#" (onclick)="this.hideme = !this.hideme">Click</a>
   <div [hidden]="this.hideme">Hide</div>
</li>

Итак, есть ли простой способ решить эту проблему?

Ответ 1

Вы hideme переменная глобальная. Возможно, вы можете прикрепить его к текущему элементу:

<li *ngFor=" #item of items " >
  <a href="#" (onclick)="item.hideme = !item.hideme">Click</a>
  <div [hidden]="item.hideme">Hide</div>
</li>

В противном случае вам нужно использовать выделенный объект объекта из вашего компонента. Вот пример:

<li *ngFor="let item of items " >
  <a href="#" (onclick)="hideme[item.id] = !hideme[item.id]">Click</a>
  <div [hidden]="hideme[item.id]">Hide</div>
</li>

Не забудьте инициализировать объект hideme таким образом в своем компоненте:

hideme:<any> = {};

Edit

Если вы хотите сделать эту работу как вкладки, вам нужно немного больше работы; -)

<li *ngFor="let item of items " >
  <a href="#" (onclick)="onClick(item)">Click</a>
  <div [hidden]="hideme[item.id]">Hide</div>
</li>

И для отображения щелкнутого элемента и скрытия других:

onClick(item) {
  Object.keys(this.hideme).forEach(h => {
    this.hideme[h] = false;
  });
  this.hideme[item.id] = true;
}

Ответ 2

Вот пример, который показывает знак плюса, когда родительский элемент свернут и переключается на знак минуса, когда он разворачивается, и показывает список элементов, принадлежащих выбранной категории. (В вашем случае это будет div, который содержит вещи, которые вы хотите показать и спрятать, а не список.)

Я достиг этого, используя элементы details и summary вместо аккордеона. Эти элементы предназначены для этого использования.

Используя проблему, которая была представлена в этом потоке: angular2 переключить значки внутри ngFor

Вот скриншоты того, что выглядит сведенная и расширенная категория:

Свернутая категория со знаком плюса

Расширенная категория со знаком минус

Это шаблон:

<ul *ngIf="categoryList && categoryList.length > 0">
        <li *ngFor="let category of categoryList">
            <details>
                <summary>
                    <i class="fa fa-lg expand-icon"></i>
                    <span>{{ category.name }}</span>
                </summary>
                <ul>
                    <li *ngFor="let item of category.yourItemListUnderCategory">{{ item }}</li>
                </ul>
            </details>
        </li>
    </ul>

Я использую Font Awesome для значков "плюс" и "минус", и вот как их переключаться. В вашем css добавьте следующие стили:

(Я ссылаюсь на значок с классом, который я ему назначил, но вы также можете сделать подробности сводка i: перед тем и подробности [open] итоговая информация i: ранее)

details summary .expand-icon:before {
    content: "\f055";
}
details[open] summary .expand-icon:before {
    content: "\f056";
}

Примечание. Я использую тему Bootstrap для скриншотов, но разделил имена классов на элементах, чтобы не загромождать ответ.

Ответ 3

работает для меня:

в вашем compoment decler о hideme как массиве

hideme=[]

и в ngFor сделайте это:

<li *ngFor="item of items;let i = index " >
   <a (click)="hideme[i] = !hideme[i]">show/hide</a>
   <div [hidden]="hideme[i]">The content will show/hide</div>
</li>

Ответ 4

В HTML: (Нажмите) = "OnClick ($ событие)"

Внутри функции onClick вы можете поймать событие и использовать его как объект jquery, например:

onClick(event){
   $(event.target).siblings('div').toggle(500);
}

В этом примере я ищу родственника моего целевого объекта, вы можете сделать это с помощью любого объекта, который вам нужен.

Ответ 5

В классе компонента объявите переменную hideme (typescript):

export class MyPage{
   hideme = {};
   constructor(){
       this.hideme = {}; // init is required
   }
   ...

Показать/скрыть управление в шаблоне:

<li *ngFor="item of items " >
   <a (click)="hideme[item.id] = !hideme[item.id]">show/hide</a>
   <div [hidden]="!hideme[item.id]">The content will show/hide</div>
</li>

Примечания: hideme не требуется init, потому что hideme[item.id] есть undefined, поэтому !hideme[item.id] будет true.