PrimeNG TypeError "this._activeIndex.includes" 不是函数

Question

我有一个组件，我在其中使用 accordion.I 想要启用多个选项卡和自定义 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>

这是我的组件class

@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

Answer 1

您不能同时使用两者。非此即彼。

multiple：启用后，可同时激活多个标签页。

activeIndex：活动选项卡的索引或以编程方式更改所选选项卡的索引数组。

由于他们的工作方式，他们会相互矛盾。一种是多开，一种是只开一个。

https://www.primefaces.org/primeng/#/accordion

例如：

假设您有一个函数 openDoor() 和一个函数 closedDoor() 如果您在 SAME TIME 使用它们，它们将相互矛盾其他.

这就是你需要的：

<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>

Answer 2

文档说：

Index of the active tab or an array of indexes to change selected tab programmatically.

这里是 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)这就是您的错误来源。

PrimeNG TypeError "this._activeIndex.includes" 不是函数

PrimeNG TypeError "this._activeIndex.includes" is not a function

primeng

angular

angular7