Javascript 用于在Responsive carousel中呈现相互重叠的项目

我使用的是角度11和响应旋转木马。旋转木马使用阵列填充mat卡。但是，当页面第一次加载时，所有的卡片都呈现在彼此的顶部，如图所示

但看起来应该是这样的

但在调整窗口大小并恢复到原始大小后，旋转木马渲染效果良好。我想找到一种方法，让卡片在第一次使用时正确呈现

HTML代码如下所示

<carousel [dots]="true" [cellsToShow]=cellsToShow [height]="carouselHeight" [autoplay]="false"
        [autoplayInterval]="2000"
        [borderRadius]="2" [pauseOnHover]="true">
<div class="carousel-cell" *ngFor="let item of cards; index as i; trackBy: fun">
  <mat-card class="example-card mat-elevation-z0">
    <mat-card-header>
      <a mat-card-avatar class="example-header-image" [href]="telegramUrl" target="_blank"</a>
      <mat-card-title><b>Ultime Offerte</b></mat-card-title>
      <mat-card-subtitle><i>Di Offerte Nerd</i></mat-card-subtitle>
    </mat-card-header>
    <br>
    <div class="example-card-image"><img mat-card-image [src]=item[0] alt=""></div>
    <mat-card-content>
      <div [innerHTML]="item[1]"></div>
      <br>
      {{item[2]}} <a href="{{item[3]}}" target="_blank">{{item[3]}}</a>
    </mat-card-content>
  </mat-card>
</div>

---

这只是我的猜测，但请尝试在使用转盘的组件的

ngAfterViewInit（）中调用
cdRef.markForCheck（）
：

import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';

@Component({
  ...
})
export class MyComponent implements AfterViewInit {
  constructor(private cdRef: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.cdRef.markForCheck();
    // also try this.cdRef.detectChanges(); instead of the above
  }
}

但更好的方法是在您提供给旋转木马的数据准备就绪时触发更改检测

import { Component, AfterViewInit, ChangeDetectorRef } from '@angular/core';

@Component({
  ...
})
export class MyComponent implements AfterViewInit {
  constructor(private cdRef: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.cdRef.markForCheck();
    // also try this.cdRef.detectChanges(); instead of the above
  }
}