我ngb-bootstrap在我的 Angular 9 應(yīng)用程序中使用折疊控制。我已將折疊控件放置ngb-bootstrap在引導(dǎo)卡中，如您所見，將生成多張卡，并且我已將卡頭上的折疊按鈕與該特定卡的卡體鏈接起來，因此僅當(dāng)單擊該按鈕時(shí)該卡牌會(huì)崩潰，而不是整個(gè)卡牌組會(huì)崩潰。我已經(jīng)使用 div 設(shè)置了屬性aria-controls，如以下代碼所示。但我面臨的問題是，當(dāng)我單擊按鈕時(shí)，整個(gè)卡片集會(huì)折疊起來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>
1 回答
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
發(fā)生這種情況是因?yàn)?isCollapse 代表所有卡作為一個(gè)個(gè)體。您需要做的是更改為布爾值數(shù)組來表示每張卡。
例子：
? ? 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>
- 1 回答
- 0 關(guān)注
- 104 瀏覽
添加回答
舉報(bào)
0/150
提交
取消