内容未显示在Primeng <p-tabpanel>标记中

Question

我正在尝试在Primeng tabView中显示一个组件。该组件是使用joint.js图表​​库构建的图表。当我将组件标签放在<p-tabPanel>内时，它不会显示。该组件确实显示在周围的<p-tabView>标签中，并且几乎显示在其他所有位置。

尝试获取组件的代码，并将其直接传输到正在使用该组件的组件。

target-component.html

<p-tabView>
  <p-tabPanel header="P">
    <app-diagram></app-diagram>
  </p-tabPanel>
  <p-tabPanel header="D">

  </p-tabPanel>
  <p-tabPanel header="S">

  </p-tabPanel>
</p-tabView>

diagram-component.html

<div id = myholder></div>

diagram-component.ts

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
  el: document.getElementById('myholder'),
  model: graph,
  width: 1600,
  height: 1000,
  gridSize: 1
});

我希望该图形显示在选项卡中。使用检查器时，div myholder的高度为0，根本不显示。