在循环中创建动态组件会导致闪烁

Question

我有一个项目循环，每隔几秒更新一次。根据项目的类型，加载不同的组件。此更新会在每个项目的几秒钟内生成一个空模板。

列出HTML：

<div ngFor="let ledgerDeposit of deposits">
    <ng-template #depositTarget></ng-template>
</div>

列出组件：

 @ViewChildren('depositTarget', { read: ViewContainerRef }) depositTargets: QueryList<ViewContainerRef>; 

    async ionViewDidLoad() {
        this.depositTargets.changes.subscribe(() => {
            this.loadComponents();
        });

        await this.loadDeposits(false);
    }

   async loadDeposits(forceRefresh: boolean) {
    this.deposits = await this.exchanges.getDeposits();
   }

    private loadComponents() {
        this.depositTargets.toArray().forEach((viewContainerRef, i) => {
            let deposit = this.deposits[i];
            let exchange = this.exchanges.getExchange(deposit.exchange);

            let componentFactory = this.componentFactoryResolver.resolveComponentFactory(exchange.depositSingleComponentName);
            let componentRef = viewContainerRef.createComponent(componentFactory);
            componentRef.instance.deposit = this.deposits[i];
        });
    }

有没有办法防止闪烁？与缓存组件一样，每次更新时都不会重新创建组件吗？

闪烁演示：

Answer 1

我添加了trackBy，因此它不会重新创建列表中的所有项目。

<div class="fund" *ngFor="let ledgerDeposit of deposits; trackBy: trackById">
    <ng-template #depositTarget></ng-template>
</div>