为什么我的加载器破坏了fxLayout行换行

Question

我有一个带行换行的fxLayout div和*ngFor，它拉出一个材料卡的数组。最近，我向组件添加了一个完整的页面加载器，现在我发现它破坏了fxLayout的响应性。现在，它只有在调整大小后将鼠标悬停在元素上才能工作。下面是这个问题的实况：https://bellavistabulgaria.bg/test/screen-capture%20(2).gif This is my HTML：

 <div fxLayoutAlign="center center" class="loading" *ngIf="loading">
  <mat-spinner></mat-spinner>
</div>   
<div  *ngIf ="!loading" class="content"  [@scaleUp]="filteredArr.length">
    <div  fxLayout= "row wrap"   fxLayoutGap="10px grid">
        <div (click)="onSelect(user)" fxLayoutAlign="center"  fxFlex="25%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let user of filteredArr">
          <app-user-card  [user] = "user" class="user-card"></app-user-card>
        </div>
    </div>
</div>

This is the CSS of the component:

.content{

填充:16px；

}

.form{

页边距顶部: 20px；

填充: 10px；

最小宽度: 300px；

}

.user-card{

光标:指针；

转换:转换250ms；

转换时序函数:缓出；

}

..user card:hover{

Z指数: 100；

变换:比例(1.1)；

}

.loading{

宽度: 100%；

高度: 100vh；

背景色: rgba(143,143,143，0.8)；

}

```

Answer 1

您可能需要一个@HostListener，如下所示。

@HostListener('window:resize')
onResize(): void {
  // executes every time the browser is resized
  // add code here to repaint / redraw the broken element
}

我不熟悉如何重画/重画你的损坏元素，所以你需要研究一下。