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

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

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

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

    Вы являетесь переменной 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 .

  • Как связать raw html в Angular2
  • Угловая загрузка файла
  • Фокус на вновь добавленном элементе ввода
  • AngularJS - Как я могу сделать redirect с полной загрузкой страницы?
  • Угловое изменение на каждом нажатии клавиши
  • Как я могу ограничить повторение ngFor некоторым количеством элементов в Angular?
  • множественная компоновка для разных страниц в угловом 2
  • Как я могу динамически добавлять директиву в AngularJS?
  • Повторите элемент HTML несколько раз, используя ngFor на основе числа
  • Угловой маршрутизатор поддерживает строку запроса
  • в Angular2 как узнать, когда ЛЮБОЕ поле ввода ввода потеряло фокус
  • Interesting Posts

    Последний неизменяемый файл выглядит как: \ pagefile.sys

    RecyclerView вылетает, когда «утилизированные или прикрепленные виды не могут быть переработаны»

    Как вы можете избежать просьбы ввести пароль BitBucket при нажатии на вики-версию BitBucket?

    Могу ли я дважды загружать Linux и Windows 7, но использовать загрузчик Windows вместо GRUB?

    Не удается заставить карты памяти работать вместе

    Как нарисовать линию в Sprite-kit

    Что такое «подписанные» куки в connect / expressjs?

    Ansible не работает с / bin / sh: 1: / usr / bin / python: не найден

    Сохранить настройки в VB.Net или C #

    Что делает комбинирование методов сжатия в 7z?

    Что такое свойства навигации в Entity Framework?

    Заполнение jTable с использованием данных базы данных

    Использование RegEx для балансировки круглых скобок

    Преобразование вывода из символической математики (sym) в float

    Как сохранить историю оболочки из emacs и использовать ее в терминале?

    Давайте будем гением компьютера.