我有一个手风琴，如下所示。
当单击链接时，我需要触发所有 p-accordianTab 元素的单击事件。
怎么可能？
<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
<p-accordion [multiple]="true">
<div class="row" *ngFor="let category of result.Categories">
<p-accordionTab #accordianTab header="{{category.Name}}">
</p-accordionTab>
</div>
</p-accordion>
我尝试将此“#accordionTab”添加到元素并从 TypeScript 访问它，但不起作用：
@ViewChild('accordionTab') accordionTab: ElementRef;
openCloseAllText: string = "Open";
openCloseAll() {
// get all accordions and click them
this.openCloseAllText = this.openCloseAllText === "Open" ? "Close" : "Open";
this.accordionTab.nativeElement.click();
}
TypeError: Cannot read property 'nativeElement' of undefined
为什么不直接使用手风琴本身的 tabs 属性？
<p-accordion #accordion>
<p-accordionTab header="Header Content">
Body Content
</p-accordionTab>
</p-accordion>
@ViewChild('accordion') accordion: Accordion;
closeAllAccordionTabs() {
if(!isNullOrUndefined(this.accordion.tabs)){
for(let tab of this.accordion.tabs) {
if(tab.selected) tab.selected = false;
}
}
}
openAllAccordionTabs() {
if(!isNullOrUndefined(this.accordion.tabs)){
for(let tab of this.accordion.tabs) {
if(!tab.selected) tab.selected = true;
}
}
}
我能够使用与您相同的方法来完成此工作，但将模板变量移动到自定义 p-header 内的元素，而不是 p-accordion-Tab 上。
<p-accordionTab>
<p-header>
<span #header>
Header Content
</span>
</p-header>
Body Content
</p-accordionTab>
他们的文档页面底部有有关使用自定义标题内容的信息：https://www.primefaces.org/primeng/#/accordion
这是一个不需要@ViewChild的替代方法。如果您的手风琴位于 *ngIf 中并且仅在某些条件下添加到 DOM（在这种情况下 @ViewChild 未定义且无法设置），请使用此选项。
使用 activeIndex 属性：
<p-accordion [activeIndex]="openAccordion">将此变量放入组件中：
openAccordion = -1;当您想打开手风琴时，将 this.openAccordion 设置为您要打开的手风琴选项卡的索引。例如
this.openAccordion = 0;或者在我使用它的单元测试中：
fixture.componentInstance.openAccordion = 0;您可以在 HTML 中执行类似的操作
<p-accordion (onOpen)='onTabOpen($event)'>
<p-accordionTab *ngFor='let chart of chartList' header='{{chart.chartName}}'>
<div *ngFor='let content of chartContentList'>{{content.referenceName}}</div>
</p-accordionTab>
</p-accordion>
并在 Typescript 中编写 onTabOpen 事件处理程序
chartList: ChartModel[]=[];
chartContentList: ChartContentModel[]=[];
onTabOpen(e){
const index=e.index
const contentList=this.chartList.filter(x=>x.id==index);
this.service.getChartContent(contentList[0].chartName).subscribe((res)=>{
if(res){
this.chartContentList=res;
}
});
}
因此，当您单击任何标题选项卡时，它会将索引传递给 OnTabOpen 处理程序，然后获取要在选项卡下加载的内容并动态绑定其内容。
查看型号：
public interface ChartModel{
id?:number;
chartName?:string;
}
public interface ChartContentModel{
referenceName?:string;
}
您可以使用 p-accordion 的
selected<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
<p-accordion [multiple]="true" [seleted]="accordionTrigger">
<div class="row" *ngFor="let category of result.Categories">
<p-accordionTab #accordianTab header="{{category.Name}}">
</p-accordionTab>
</div>
</p-accordion>
accordionTrigger: boolean = false; // false is closed and true is opened
changeAccordion() {
this.accordionTrigger = !this.accordionTrigger;
}
如果你有很多手风琴，你可以做一个布尔数组并为每个手风琴设置一个 id。
我想要在多种模式下为 p-accordion 提供“全部折叠”和“全部展开”功能，但这里的解决方案都不起作用，所以这是我的（Angular 16.2.8，primeng 16.0.2）
在我的模板中：
<p-accordion #accordion [multiple]="true" [activeIndex]="activeIndexes">
<!-- [...] -->
</p-accordion>
在我的组件中：
@ViewChild('accordion') accordion: Accordion;
public activeIndexes: number[] = [];
public collapseAll() {
this.activeIndexes = [];
if (this.accordion)
this.accordion.updateSelectionState();
}
public expandAll() {
this.activeIndexes = this.rapportsJournees.map((_, index) => index);
if (this.accordion)
this.accordion.updateSelectionState();
}
如果没有调用
this.accordion.updateSelectionState()