[英]why ngb-bootstrap Collapse control 's toggle collapse button collapses the whole dynamically generated card set?
我在我的 angular 9 应用程序中使用了ngb-bootstrap
折叠控制。
我已将ngb-bootstrap
折叠控件放在引导卡中,如您所见,下面的代码将生成多张卡片,并且我已将卡片标题上的折叠按钮与该特定卡片的卡片主体相关联,因此当按钮仅单击该卡折叠,而不是整个卡组。 我已经使用ngbCollapse
div 的id
设置了aria-controls
属性,如下面的代码所示。 但是我面临的问题是当我单击按钮时,整个卡片组都会折叠起来
<div class="animated fadeIn" style="margin-left: 2%;margin-right: 2%;margin-top: 2%;" id="qgroup-div-g{{ei}}" *ngFor="let g of this.s?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<!-- <i class="fa fa-align-justify"></i> Combined All Table -->
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
<i class="fa fa-align-justify"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body">
<div class="table-responsive">
sample text 1
</div>
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
发生这种情况是因为 isCollapse 将所有卡片都表示为一个个体。 您需要做的是更改为布尔数组来表示每张卡片。
例子:
this.MyQuestionGroup = [
{
QuestionGroupName: "GroupName1"
},
{
QuestionGroupName: "GroupName2"
},
{
QuestionGroupName: "GroupName3"
}
];
for(let i=0; i<this.MyQuestionGroup.length; i++){
this.isCollapsed.push(false);
}
然后在你的 html 中:
(click)="isCollapsed[ei] = !isCollapsed[ei]"
[attr.aria-expanded]="!isCollapsed[ei]"
<div [ngbCollapse]="isCollapsed[ei]">
</div>
这是 stackblitz折叠卡中的工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.