angular using ngRx store and pipe async not get update in the DOM

问题

I use the async pipe for the observable data to show in my template.

In my typescript component onInit

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

In html, i use async pipe and using virtual scrolling

<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>

I also have the insert button to insert the data to the store and the above scroll viewport will update with the inserted data. These are all working good.

The problem comes in electron app, because i need to save the insert data to the sqlite through ipc. Only after insert to sqlite table and get the success insert, then i will add to the ngrx store. Although the store is updated with the insert data, but the DOM not get update so the UI does not show the inserted item. If i inserted the second item, then UI will show the previous added item.

It seems that angular change detection cycle is completed before data changes occur in ngRx store. But i don't understand is that this.data$ will receive the new emit data from the ngrx store, but why the template async pipe does not able to detect the new emit data and re-render the template?

I also try with inject ChangeDetectorRef, then in my onInit, i subscribe to the this.data$ observable like below:

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

This also not work. DOM not detect changes and UI not get updated.

来源：https://stackoverflow.com/questions/53123304/angular-using-ngrx-store-and-pipe-async-not-get-update-in-the-dom

标签

angular