Блог

Главная - Вопросы по программированию - Angular переключает div в цикле ngFor

Angular переключает div в цикле ngFor

#html #css #angular

#HTML #css #angular

Вопрос:

 <div *ngFor="let item of items">
  <div>Title</div>
  <div class="show-more" (click)="do something">Show more</div>
  <div class="extra-content">
    <p>lorum ipsum bla bla bla</p>
  </div>
</div>

Как вы можете переключить дополнительный контент div, нажав на элемент показать больше div.
это должно быть уникальным для каждого элемента в коллекции.

Таким образом, глобальная переменная не может быть использована, потому что это приведет к запуску всех элементов в коллекции (одновременно).

Комментарии:

1. Создайте новый компонент, который содержит HTML-содержимое для каждого item и передайте [item] через @Input . Таким образом, он может иметь свои собственные переменные открытия / закрытия / состояние, не влияя на другие item .

Ответ №1:

Добавьте новое свойство show в item , как показано ниже

items = items.map(item => ({...item, show: false}))

затем переключите его щелчком мыши.

 <div *ngFor="let item of items">
  <div>Title</div>
  <div class="show-more" (click)="item.show = !item.show">Show more</div>
  <div *ngIf = "item.show" class="extra-content">
    <p>lorum ipsum bla bla bla</p>
  </div>
</div>

это настроит отображение элемента уникально для каждой строки / элемента