Carousel with cross-fade using *ngFor

Hi, if i use the carousel using crossfade effect, then applied the *ngFor then i have different effect from the docs

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'" [isControls]="false" >
            <mdb-carousel-item *ngFor="let c of headers">
                <img class="d-block w-100" [src]="c.url" [alt]="c.caption">
            </mdb-carousel-item>
</mdb-carousel>

if i inspect with chrome, i got this:

<div class="carousel-inner"><!--bindings={
      "ng-reflect-ng-for-of": "[object Object],[object Object"
    }-->
    <mdb-carousel-item _ngcontent-c2="" class="carousel-item ng-star-inserted">
        <img _ngcontent-c2="" class="d-block w-100" src="http://aaa.local/api/wp-content/uploads/2019/01/header1-1.jpeg" alt="">
    </mdb-carousel-item>
    <mdb-carousel-item _ngcontent-c2="" class="carousel-item ng-star-inserted">
        <img _ngcontent-c2="" class="d-block w-100" src="http://aaa.local/api/wp-content/uploads/2019/01/header4.jpeg" alt="">
    </mdb-carousel-item>
</div>

but with the sample on the documentation: the mdb-carousel-item is replaced with div class="carousel-item" i think thats the reason i have different fade effect.. it's like flashy effect

how to solve this.? thx