Angular中*ngFor渲染异步数据时Flickity轮播失效如何解决

核心是Flickity初始化时机和异步渲染时序不匹配：
页面初始加载时RecentReleases变量为空，Flickity通过data-flickity属性触发自动初始化时，轮播容器内还没有任何通过*ngFor渲染的轮播项；等接口返回数据、*ngFor完成轮播项DOM插入后，已经初始化完成的Flickity不会自动识别新增的子元素，最终出现幻灯片堆叠、无法滑动的现象。
直接给静态初始值能正常运行，就是因为初始化时DOM里已经存在所有轮播项，和排查结论一致。

方案1：最小改动版（推荐） #

通过*ngIf控制轮播容器的渲染时机，等异步数据返回后再渲染轮播节点，让Flickity自动初始化时能读取到全部轮播项。
只需要修改模板代码，TS逻辑无需改动：

<!-- 新增*ngIf判断，仅当轮播数据存在且有内容时才渲染轮播容器 -->
<div 
  class="carousel cssanimation sequence fadeInBottom"
  *ngIf="RecentReleases?.length"
  data-flickity='{"autoPlay": "10000", "wrapAround": true, "imagesLoaded": true}'
>
  <a href="" *ngFor="let show of RecentReleases">
    <img class="carousel-cell" [src]="show.largePoster" alt="poster">
  </a>
</div>

逻辑说明：*ngIf为false时轮播容器不会被插入DOM，不会触发Flickity提前初始化；等接口返回数据赋值给RecentReleases后，条件满足才会渲染整个轮播节点，此时*ngFor会同步完成所有轮播项的渲染，Flickity自动初始化时可以拿到完整的轮播元素，功能正常。

方案2：手动控制初始化（适合后续有动态增删轮播项的场景） #

去掉data-flickity自动初始化逻辑，等异步数据渲染完成后手动实例化Flickity，后续更新轮播数据时也可以通过实例方法刷新布局。
第一步：修改模板，去掉data-flickity属性，保留容器引用：

<div class="carousel cssanimation sequence fadeInBottom" #carousel>
  <a href="" *ngFor="let show of RecentReleases">
    <img class="carousel-cell" [src]="show.largePoster" alt="poster">
  </a>
</div>

第二步：修改TS逻辑，引入Flickity，在DOM更新完成后初始化实例：

import { Component, ElementRef, ViewChild } from '@angular/core';
import Flickity from 'flickity';
import { IShow } from './对应类型定义路径';
import { HomeService } from './对应服务路径';

@Component({
  // 原有组件配置保持不变
})
export class 你的组件类名 {
  RecentReleases?: IShow[];
  @ViewChild('carousel') carouselEl!: ElementRef;
  private flickityInstance?: Flickity;

  constructor(private homeService: HomeService) {}

  ngOnInit(): void {
    this.homeService.getRecentReleases().subscribe((shows) => {
      this.RecentReleases = shows;
      // 延时0ms等待Angular完成*ngFor的DOM渲染
      setTimeout(() => {
        // 重复初始化前先销毁旧实例
        if (this.flickityInstance) {
          this.flickityInstance.destroy();
        }
        // 传入配置初始化Flickity
        this.flickityInstance = new Flickity(this.carouselEl.nativeElement, {
          autoPlay: 10000,
          wrapAround: true,
          imagesLoaded: true
        });
      }, 0);
    });
  }
}

如果后续需要动态修改RecentReleases的数据，在数据赋值完成后调用以下两个方法刷新轮播即可：

this.flickityInstance?.reloadCells();
this.flickityInstance?.resize();

• 不要在ngAfterViewInit生命周期里直接初始化Flickity，这个钩子触发时异步接口大概率还未返回，*ngFor还未渲染轮播项，初始化后依然会出现堆叠问题。
• 配置里的imagesLoaded: true已经开启了图片加载监听，会等轮播内图片加载完成后再计算尺寸，不需要额外处理图片加载导致的布局错位问题。

内容的提问来源于stack exchange，提问作者Emad Naeim