ngЕсли каждый раз менять выравнивание

Question

<div fxLayout="row style="padding-top: 2rem;padding-left: 10%;"
     fxLayoutAlign="space around"  fxLayoutGap="2%">
  <div fxLayout="row" fxLayoutGap="2%">
    <mat-card (click)="onClickShowChart1($event)" style="height: 55%;">
      <mat-card-header>{{A}}</mat-card-header>
      <mat-card-content>A</mat-card-content>
    </mat-card>
    <mat-card (click)="onClickShowChart2($event)" style="height: 55%;" >
     <mat-card-header>{{R}}</mat-card-header>
     <mat-card-content>R</mat-card-content>
    </mat-card>
  </div>
  <div *ngIf="showChart1">
    <chart Code....>
  </div>
  <div *ngIf="showChart2">
    <chart Code....>
  </div>
</div>

в моем файле component.ts я упомянул функции

onClickShowChart2(event) {
    this.showChart1=false
    this.showChart2=true
}
onClickShowChart1(event) {
    this.showChart1=true
    this.showChart2=false
}

, они работают так, как ожидалось, но каждый раз, когда они меняют свою структуру, меняя структуру мат-карты на долю секунды ..

Answer 1

Да, причина того же в том, что ngIf является структурной директивой. Когда условие ложно, div не появляется, но когда условие истинно, div переходит в dom и может изменить выравнивание. Попробуйте использовать ng -container, а не тег div.