我正在开发一个侧边菜单,该菜单将显示一个项目列表,每个项目旁边都有一个复选框,当选中该复选框时 --- V 形图标将启用,以允许用户显示下拉列表该检查项目。
我当前的问题是,每当我单击图标来展开所选项目的下拉列表时...它只会展开列表中第一项的下拉列表。它似乎没有显示每个选定项目的下拉菜单。
这是我的 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] 项目 1 ^
加一个
dd b
[x] 第 2 项(向下 V 形)
[x] 项目 3(向下 V 形)
单击项目 1,2 或 3 的 V 形 - 它只会展开项目 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
}
}
关于javascript - ngFor 中的下拉列表仅显示第一个列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50515433/