为什么 ngb-bootstrap Collapse 控件的切换折叠按钮会折叠整个动态生成的卡组？

Question

我ngb-bootstrap在我的 Angular 9 应用程序中使用折叠控制。

我已将折叠控件放置ngb-bootstrap在引导卡中，如您所见，将生成多张卡，并且我已将卡头上的折叠按钮与该特定卡的卡体链接起来，因此仅当单击该按钮时该卡牌会崩溃，而不是整个卡牌组会崩溃。我已经使用 div 设置了属性aria-controls，如以下代码所示。但我面临的问题是，当我单击按钮时，整个卡片集会折叠起来idngbCollapse

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

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