Angular 5 Prime Ng弹性网格，当变量更改时div大小也会更改

Question

我目前正在使用primeng flex网格。我在左侧有一个条形图，在右侧有一个表。我希望初始视图仅显示条形图。如果showTable更改为true，则我希望条形图仅是屏幕的一半，而表格要填充另一半。到目前为止，这是我目前所拥有的。 问题是，如果我在showTable上调用更改，该表将弹出并占据一半的屏幕，而条形图仍将占据整个屏幕。然后，如果我按F12键，它将自动将其调整为相等的一半屏幕。我该如何解决？

<div class="p-grid">
   <div  [hidden]="!chart" [ngClass]="showTable ? 'p-col-6':'p-col-12'">
       <canvas id="canvas">{{ chart }}</canvas>
   </div>
   <div *ngIf="showTable" class="p-col-6"> 
   </div>
</div>