Angular 传单地图不'；t从mdb在步进器中正确渲染

我在我的angular项目中成功地整合了ngx传单的不同传单地图。 现在我遇到了以下问题： 对于css，我使用了额外的引导材料设计（mdb），在某一点上，我必须使用步进器。步进器是mdb的一个组件，我需要在步进器的一个步骤中渲染传单贴图。但是stepper没有在css和功能中正确加载。我在这个问题上加了一张照片

我认为这是因为当从一个步进到另一个步进时，步进机的步进会改变它们的大小。但我只是不知道如何解决这个问题。 当相关步骤处于活动状态时，我尝试渲染贴图并再次设置大小，但这不起作用。这也是函数

invalidateSize（）的常见解决方案对我不起作用

你能帮帮我吗？
提前多谢

这是我的html：

<mdb-stepper #stepper class="custom-stepper" (window:resize)="stepperOrientation()" [vertical]="vertical"
        [linear]="true">
...
<mdb-step #standortStep name="Standort">
    <ng-container *ngIf="standortStep.isActive">
        <div class="row m-0 mt-4">
            <mdb-card class="location-title p-2 w-100">
                Titel
            </mdb-card>
        </div>
        <div class="row m-0 px-2">
            <div class="create-map-wrapper">
                <div leaflet class="create-map" [leafletCenter]="center" [leafletFitBounds]="fitBounds"
                [leafletBaseLayers]="baseLayers" [leafletLayers]="markers" (leafletClick)="mapClicked($event)"
                *ngIf="standortStep.isActive">
                </div>
            </div>
        </div>
    </ng-container>
</mdb-step>
...
</mdb-stepper>


补充：Layser a的某些部分显示正确，但大部分地图是灰色的，我不能以我应该的方式与地图交互。当我用鼠标缩放时，它是这样的：

虽然看起来已经有一些CSS干扰了传单（考虑到缩放、图层控制按钮和属性的形状），但地图的其余部分似乎并不奇怪：这将很有趣地解释您所期望的未达到的内容。是的，但我也无法以正确的方式与它交互。地图的缩放非常奇怪，地图的反应就像我刚刚添加到帖子中的第二张图片。
.create-map-wrapper {
  width: 100%;
  .create-map {
    height: 30vh;
  }
}