Угловая изгибающая сетка 5 Prime Ng, размеры делений меняются при изменении переменной

Question

В настоящее время я использую primeng flex grid.У меня есть гистограмма с левой стороны и таблица с правой стороны.Я хочу, чтобы на начальном экране отображалась только гистограмма.Если 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>