Javascript NGO中的下拉列表，仅显示第一个列表项

我正在使用一个侧菜单，它将显示一个项目列表，每个项目旁边都有一个复选框，当复选框被选中时，V形图标将被启用，以允许用户显示该选中项目的下拉列表

我当前的问题是，每当我点击图标以展开选中项目的下拉列表时。。。它仅展开列表中第一项的下拉列表。它似乎没有显示每个选定项目的下拉列表

以下是我的HTML代码：

{{item.title}


DD 1


DD 2

问题将与您使用的“listCollapse”Id有关。因为使用ngFor生成的所有列表项都将具有相同的id。因此，每当触发时，具有id“listCollapse”的第一个元素将被打开。

您可以执行以下操作

HTML

---

是否可以改用项目id使其更独特？比如

item.id

Yep，这是可能的。但我不确定

aria controls=“listclapse”href=“#listclapse”

我知道我可以做到这一点：

[attr.aria controls]=“item.id”

但我必须对href上的绑定进行一些研究。您可以尝试

数据目标

。

<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>

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

  }

}