我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>
1 回答
慕的地8271018
TA貢獻1796條經驗 獲得超4個贊
發生這種情況是因為 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>
- 1 回答
- 0 關注
- 93 瀏覽
添加回答
舉報
0/150
提交
取消