angular-material - 在 ngIf 过滤器之后，Mat Cards 没有重新排列到同一行

Question

我试图了解在单击切换按钮以满足 *ngIf 条件后，我的代码的哪一部分导致我的仪表板上的 mat-cards 不填充同一行。我在浏览器上使用了检查工具，我认为问题在于它仍然认为那里有一张卡，而实际上没有。启动另一个 API 调用来更新卡片听起来不正确，所以我猜测使用 *ngIf 是正确的方法，但我似乎无法理解为什么它实际上并没有删除并显示我想要的卡片同一行。它也可能与 Flex 布局响应能力有关？使用 ng-container 似乎解决了卡片位于不同行的问题，但它消除了我需要保持仪表板整洁的任何 Flex 布局响应能力。我猜那里'

这是垫卡容器的代码

<div style="padding-left: 60px; padding-top: 16px;" fxLayout="row wrap" fxLayoutGap="8px">
        <ng-container *ngFor="let pvsTrip of pvsTrips; let i = index" >
          <div *ngIf="(milesToggle && pvsMilesVariance.includes(pvsTrip.scheduleNum)) || !milesToggle" fxFlex.gt-md="32%" fxFlex.lt-sm="100%" fxFlex.md="48%"
            fxLayout.lt-sm="column">
              <div *ngIf = "(cToggle && !ncToggle && !neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && ncToggle && !neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && !ncToggle && neToggle && compliance.includes(pvsTrip.scheduleNum)) || (!cToggle && !ncToggle && !neToggle)">
                    <mat-card> 
                    </mat-card>

提前为凌乱的截图道歉。我那里有我无法公开的数据。