如何在 primeNg p-splitter 中动态添加分割面板？

Question

<p-button label="Add" (click)="onAddPanel()"></p-button>\n <p-splitter [style]="{'height': '100px'}" styleClass="p-mb-5">\n  <ng-container  *ngFor="let panel of panels">\n    <ng-template pTemplate>\n      <div class="p-col p-d-flex p-ai-center p-jc-center">\n          {{panel.name}}\n      </div>\n    </ng-template>\n  </ng-container>\n</p-splitter>\n

\n

panels = [ {name: 'Panel1'}, {name: 'Panel2'}, {name: 'Panel3'} ];\n\nonAddPanel() {\n    this.panels = [...this.panels, ...[{name: `Panel${this.panels.length+1}`}] ];\n}\n

\n

如何绑定p-splitter到新集合并在事件触发时添加面板onAddPanel？\n我尝试过\xe2\x80\x9cprimeng\xe2\x80\x9d: \xe2\x80\x9c12.0.0\xe2\x80\x9d但没有成功。有人有任何解决方法吗？

\n

Answer 1

你可以这样做

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
})
export class MyComponent {
  @ViewChild('splitter') splitterRef!: Splitter;
  
  items = ["Hello"]
  
  updatePanel() {
    items.push("World");
    this.splitterRef.panels = [];
    setTimeout(() => {
      this.splitterRef.ngAfterContentInit();
      this.splitterRef.cd.detectChanges();
    }, 0);
  }
}

<p-splitter
  panelStyleClass="w-screen"
  #splitter
>
  <ng-container *ngFor="let item of items">
    <ng-template pTemplate="panel">
      {{ item }}
    </ng-template>
  </ng-container>
</p-splitter>
<button onClick="updatePanel()">Update Panel</button>