为什么轮播实现CSS和* ngFor无法动态地协同工作以获取图像

Question

我正在尝试实现轮播的角度代码。轮播与动态数组相关联，但是当我*ngFor与轮播类一起使用时，它无法正常工作。

我尝试编写class="carousel-item"内部for循环，但控制台显示：

无法读取未定义的属性“ clientWidth”。

此代码不起作用：

模板：

<div class="carousel carousel-slider">

    <div class="carousel-item" href="#one!">

       <div *ngFor ="let item of items;let i = index">

           <img src={{items[i]}}>

        </div>

    </div>

</div>

成分：

options = {fullWidth: false};

constructor(private http: HttpClient) {

}

ngOnInit() {

    var elems = document.querySelectorAll('.carousel');

    var instances = M.Carousel.init(elems, this.options);

}

我也只得到一张图像，该图像也被裁剪了一半，就好像我删除了for循环并<div class="carousel-item">一个接一个地写一样：

<a class="carousel-item" href="#one!"><img src={{items[0]}}></a>

<a class="carousel-item" href="#two!"><img src={{items[1]}}></a>

<a class="carousel-item" href="#three!"><img src={{items[2]}}></a>

这样做，轮播工作了，但是它没有绑定到我想要的动态数组上。