使用ngRx存储和管道异步角度不获取DOM中的更新

Question

我使用异步管道将可观察的数据显示在模板中。

在我的打字稿组件中onInit

ngOnInit() {
   this.data$ = this.myStore.pipe(select(dataRx.getData));
}

在html中，我使用异步管道并使用虚拟滚动

<cdk-virtual-scroll-viewport [itemSize]="50" class="data-viewport" (scrolledIndexChange)="scrollIndexChange($event)">
    <div *cdkVirtualFor="let item of data$ | async; trackBy: trackByFn; let index = index;" class="data-item">
        <div>{{index}} {{ item.id}} {{ item.text }}</div>
    </div>
</cdk-virtual-scroll-viewport>

我还具有插入按钮，可将数据插入到存储中，并且上面的滚动视口将使用插入的数据进行更新。这些都很好。

问题出现在电子应用程序中，因为我需要通过ipc将插入数据保存到sqlite。只有插入到sqlite表并获得成功插入之后，然后我才会添加到ngrx存储。尽管使用插入数据更新了商店，但是DOM无法更新，因此UI不会显示插入的项目。如果我插入第二个项目，则UI将显示上一个添加的项目。

在ngRx存储中发生数据更改之前，似乎已经完成了角度更改检测周期。 但是我不明白th​​is.data $将从ngrx存储接收新的发射数据，但是为什么模板异步管道无法检测到新的发射数据并重新渲染模板？

我也尝试注入ChangeDetectorRef，然后在我的onInit中，我订阅this.data $如下所示：

ngOnInit() {
        this.data$ = this.myStore.pipe(select(dataRx.getData));
        this.data$.subscribe(
            value => {
                console.log(value);
                this.cdr.detectChanges();
            },
            error => {
                console.log(error);
            }
        );
}

这也不起作用。 DOM无法检测到更改，UI也无法更新。