我正在使用ngb下拉列表在屏幕上显示用户列表。当用户单击下拉列表时，它将显示“用户详细信息”表单。
问题是，这个表单弹出在其他用户和内容之上。我需要用户详细信息折叠而不是弹出。
我试着把aria-haspopup=false，但这并没有起到任何作用，事实上，它在inspector中仍然显示为true，所以我对它的作用和现在如何实现这一点有点困惑？我正在考虑使用像navbar切换器中的数据切换和折叠之类的东西，但不确定如何在ngbDropdown菜单中正确实现这一点....
所需结果的图像链接1
<div ngbDropdown *ngFor="let user of users" class="user-list">
<a ngbDropdownToggle id="dropdownForm" role="button" aria-haspopup="false" aria-expanded="false">{{user.firstName}} {{user.lastName }} </a>
<div ngbDropdownMenu aria-labelledby="dropdownForm">
<userForm></userForm>
</div>
</div>
从你分享的描述/图片来看，你需要的是手风琴，而不是弹出式的...因为手风琴具有可折叠的效果，而下拉菜单总是弹出式的
相关HTML：
<ngb-accordion #acc2="ngbAccordion" activeIds="ngb-panel-0" [closeOthers]="true">
<ngb-panel *ngFor="let user of users; let idx = index" class="user-list" >
<ng-template ngbPanelTitle >
<span (click)='toggleAccordion(idx)'>{{user.firstName}} {{user.lastName }}</span>
<span class='stickToRight' (click)='toggleAccordion(idx)' style='float:right'>
<!-- ... {{idx}} - {{user.opened }} -->
<ng-container *ngIf="user.opened">
<i class='fa fa-angle-down'></i>
</ng-container>
<ng-container *ngIf="!user.opened">
<i class='fa fa-angle-right'></i>
</ng-container>
</span>
</ng-template>
<ng-template ngbPanelContent>
<!-- <userForm></userForm> -->
<input type='text' placeholder="first Name" value="{{user.firstName}}" /> <br/>
<input type='text' placeholder="last Name" value="{{user.lastName}}" /> <br/>
<input type='text' placeholder="Age" /> <br/>
</ng-template>
</ngb-panel>
</ngb-accordion>
相关TS：
import { Component } from '@angular/core';
@Component({
selector: 'ngbd-accordion-basic',
templateUrl: './accordion-basic.html',
styles: [`
.stickToRight{position: absolute; right: 30px;}
`]
})
export class NgbdAccordionBasic {
users = [
{ firstName: 'fName 1', lastName: 'lName 1', opened: false },
{ firstName: 'fName 2', lastName: 'lName 2', opened: false },
{ firstName: 'fName 3', lastName: 'lName 3', opened: false },
{ firstName: 'fName 4', lastName: 'lName 4', opened: false },
{ firstName: 'fName 5', lastName: 'lName 5', opened: false }
];
resetOthers(index) {
for (var i = 0; i < this.users.length; i++) {
if (i !== index) {
this.users[i].opened = false;
}
}
}
toggleAccordion(index) {
if (this.users[index].opened == false) {
this.users[index].opened = true;
this.resetOthers(index);
} else {
this.users[index].opened = false;
this.resetOthers(index);
}
}
}
更新：根据以下提问者的评论
在这里工作stackblitz
