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

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

 
 Click 
Hide
  

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

 
 Click 
Hide
  

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

 hideme: = {}; 

редактировать

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

 
 Click 
Hide
  

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

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

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

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

 hideme=[] 

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

 
 show/hide 
The content will show/hide
  

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

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

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

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

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

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

Это шаблон:

 
 
 
 
  {{ category.name }} 
 
 
{{ item }}
 
 
 
  

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

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

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

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

В HTML: (щелкните) = “onClick ($ event)”

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

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

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

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

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

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

 
 show/hide 
The content will show/hide
  

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