Как отображать дополнительный контент только у одного из элементов списка?

Question

[Drovosek01]

Имеется такой код:

<div class="middle-content" *ngFor="let year of years">
    <a class="middle-content_top-indent" (click)="log(year)">{{year}}</a>
    
    <ul class="list-of-month" *ngFor="let month of months">
      <li>
        <span class="list-of-month__marker"></span>
        <a href="#">{{month}}</a>
      </li>
    </ul>
</div>

То есть, перечисление годов, и под каждым годом перечисление месяцев:


Нужно вывести перечисление месяцев только под определенным годом.
Как это сделать?

Answer 1

[0xD34F]

Я так понимаю, список месяцев должен разворачиваться по клику на год. Добавьте свойство activeYear, в обработчике клика выполняйте соответствующее присваивание, а в список месяцев (кстати, у вас там косячок - элементом списка является не ul, а li, так что ngFor стоит переместить) добавьте *ngIf="year === activeYear". Типа так:

activeYear = null;

log(year) {
  this.activeYear = this.activeYear === year ? null : year;
}

<div class="middle-content" *ngFor="let year of years">
  <a class="middle-content_top-indent" (click)="log(year)">{{ year }}</a>
  <ul class="list-of-month" *ngIf="year === activeYear">
    <li *ngFor="let month of months">
      <span class="list-of-month__marker"></span>
      <a href="#">{{ month }}</a>
    </li>
  </ul>
</div>