为什么 ngb-bootstrap Collapse control 的切换折叠按钮会折叠整个动态生成的卡片集？答案

【问题标题】：why ngb-bootstrap Collapse control 's toggle collapse button collapses the whole dynamically generated card set?为什么 ngb-bootstrap Collapse control 的切换折叠按钮会折叠整个动态生成的卡片集？
【发布时间】：2020-06-28 02:15:00
【问题描述】：

我在我的 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>

【问题讨论】：

标签： html css angular twitter-bootstrap ng-bootstrap

【解决方案1】：

发生这种情况是因为 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 collapse card 中的工作示例

【讨论】：