ng-zorro走马灯carousel轮播图不自动轮播问题

原文链接：ng-zorro走马灯carousel轮播图不自动轮播问题 – 每天进步一点点

 

angular项目（angular 7），ng-zorro(7.5.x)

使用carousel走马灯设置自动轮播图功能，从官网上copy下一段代码如下：

 <nz-carousel nzAutoPlay>
      <div nz-carousel-content *ngFor="let index of array">
        <h3>{{ index }}</h3>
      </div>
 </nz-carousel>

其中array的定义是这样：

 array = [1, 2, 3, 4];

这段代码可以很好的进行自动轮播。

但是我模仿了上面的代码后，页面上的图片却不自动轮播，而且在我点击下一个或者手动拖动图片滚动一下时，图片才开始自动轮播。

我的代码大概是下面这个意思：

array:any=[]; //全局数组

 ngOnInit() {
   this.getData(){}
 }
//请求数据的方法
getData(){
 let url=`xxxxx`
 this.http.get(url).subscribe((res: any) => {
      this.array=res.data
  });
}

为什么会这样呢？

因为是异步加载的，carousel这个组件预先于数据进行加载，加载时数据还没有完全填充完毕，所以组件会认为只有一张图片，当我们手动点击这个组件时，组件重新读取了已经填充完毕的数据，所以才开始自动播放。

如何解决这个问题呢?其实也简单，就是当数据完全填充完毕时才开始渲染组件，为此，我们可以使用 ngIf（其他方法满足此思路都可以）

我把代码改成下面这样：

HTML：

<div *ngIf="showCarousel">
   <nz-carousel nzAutoPlay>
      <div nz-carousel-content *ngFor="let index of array">
        <h3>{{ index }}</h3>
      </div>
  </nz-carousel>
</div>

TS:

array:any=[]; //全局数组

showCarousel=false;  //是否展示轮播图

 ngOnInit() {
   this.getData(){}
 }
//请求数据的方法
getData(){

 this.showCarousel=false
 let url=`xxxxx`
 this.http.get(url).subscribe((res: any) => {

      if(res.data.length>0){
       this.array=res.data

       this.showCarousel=true
      }
  });
}

因为ngIf是完全删除或加载dom节点，所以，有数据的时候才会填充carousel组件。