Раскрывающийся список в ng для отображения только для первого элемента списка

Question

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

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

Вот мой HTML-код:

<ul>
  <li>
    <div class="col-md-4">
      <div class="checkbox" *ngFor="let item of list">
        <div class="content-col">

          <label>
             <input type="checkbox" (click)="action(item, $event);" [checked]="item.checked">
             <span class="text-body">{{item.title}}</span>
          </label>

          <button [disabled]="!item.checked" data-toggle="collapse" data-collapse-icon="ChevronDown" data-expand-icon="ChevronUp" aria-expanded="false" aria-controls="listCollapse" href="#listCollapse">
                            <i class="win-icon"></i>
           </button>
           
        </div>
        
        <ul class="collapse" id="listCollapse">
          <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
            <a role="menuitem" [routerLink]="[...]">DD 1</a>
          </li>
          <li routerLinkActive="active">
            <a [routerLink]="[...]" role="menuitem">DD 2</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

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

Для визуального представления вот мой список:

[x] Item 1 ^
dd a
dd b
[x] Item 2 (down chevron)
[x] Item 3 (шеврон вниз)

Нажатие на шеврон для предметов 1, 2 или 3 - раскрывает только раскрывающийся список для элемента 1.

Answer 1

Вы можете сделать, как показано ниже.

HTML

<ul>
  <li>
    <div class="col-md-4">
      <div class="checkbox" *ngFor="let item of list; let i = index">
        <div class="content-col">

          <label>
            <input type="checkbox" (click)="updateItem(item, $event);" [checked]="item.checked">
            <span class="text-body">{{item.title}}</span>
          </label>

          <a data-toggle="collapse" data-collapse-icon="ChevronDown" *ngIf="item.checked == true" data-expand-icon="fa fa-chevron-up" aria-expanded="false" href="#listCollapse{{i}}">
            <button>
              <i class="fa fa-plus"></i>
            </button>
          </a>

          <a data-toggle="collapse" data-collapse-icon="ChevronDown" *ngIf="item.checked == false" data-expand-icon="fa fa-chevron-up" aria-expanded="false" href="null">
            <button [disabled] ="!item.checked" >
              <i class="fa fa-plus"></i>
            </button>
          </a>

        </div>

        <div class="collapse" id="listCollapse{{i}}">
          <div routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
            <a role="menuitem">DD 1</a>
          </div>
          <div routerLinkActive="active">
            <a role="menuitem">DD 2</a>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

TS

export class AppComponent {

list: any =
    [{
      'id': 1,
      'title': 'first',
      'checked': false
    },
    {
      'id': 1,
      'title': 'second',
      'checked': false
    }];

 updateItem(item: any,evento: any) {

    item.checked = !item.checked

  }

}

Answer 2

Проблема будет связана с идентификатором, который вы используете listCollapse.Потому что для всех элементов списка, генерируемых с помощью ngFor, будет одинаковый идентификатор.Следовательно, при запуске будет открыт первый элемент с идентификатором listCollapse.