我有一个使用手风琴的组件。我想启用多个选项卡和一个自定义的activeIndex。 这是我的代码:
<p-accordion [activeIndex]="index" [multiple]="true">
<p-accordionTab header="1st tab">
1st tab content
</p-accordionTab>
<p-accordionTab header="2nd tab">
2nd tab content
</p-accordionTab>
</p-accordion>
这是我的组件类
@Component({
selector: 'app-panel',
templateUrl: './panel.component.html',
styleUrls: ['./panel.component.css']
})
export class PanelComponent implements OnInit {
index:number = 1;
constructor() {
}
ngOnInit() {
//this.index = 0;
}
}
如果我要同时包含[activeIndex]和[multiple],则会出现问题。有什么想法为什么会发生?
我使用PrimeNG 7和angular 7
答案 0 :(得分:1)
您不能同时使用两者。可以是另一种。
multiple
:启用后,可以同时激活多个标签。
activeIndex
:活动标签的索引或一组索引,可通过编程方式更改所选标签。
由于它们的工作方式,它们将彼此矛盾。一种是开放多个,另一种是开放一个。
https://www.primefaces.org/primeng/#/accordion
例如:
想象一下,如果您有一个说openDoor()
的函数,并且如果您在 SAME TIME (相同时间)使用它们,则该函数称为closedDoor()
,它们将相互矛盾。
这就是您需要的:
<p-accordion [multiple]="true" >
<p-accordionTab header="Header 1" [selected]="true">
Content 1
</p-accordionTab>
<p-accordionTab header="Header 2">
Content 2
</p-accordionTab>
<p-accordionTab header="Header 3">
Content 3
</p-accordionTab>
</p-accordion>
答案 1 :(得分:1)
文档说:
活动标签的索引或索引数组以更改所选标签 以编程方式。
这里是related code,它在_activeIndex
中设置activeTabs
updateSelectionState() {
if (this.tabs && this.tabs.length && this._activeIndex != null) {
for (let i = 0; i < this.tabs.length; i++) {
let selected = this.multiple ? this._activeIndex.includes(i) : (i === this._activeIndex);
let changed = selected !== this.tabs[i].selected;
if (changed) {
this.tabs[i].animating = true;
}
this.tabs[i].selected = selected;
this.tabs[i].selectedChange.emit(selected);
}
}
}
因此,对于多个标签,您应该使用索引数组,而不是数字。
@Component({
selector: 'app-panel',
templateUrl: './panel.component.html',
styleUrls: ['./panel.component.css']
})
export class PanelComponent implements OnInit {
indices: number[] = [1, 2];
constructor() {
}
ngOnInit() {
//this.index = 0;
}
}
如果您想知道,this._activeIndex.includes(i)
就是您的错误出处。