Я использую асинхронный канал для наблюдаемых данных, отображаемых в моем шаблоне.
В моей машинописной компоненте 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>
У меня также есть кнопка вставки для вставки данных в хранилище, и вышеупомянутый видовой экран прокрутки обновится с добавленными данными. Все это работает хорошо.
Проблема возникает в электронном приложении, потому что мне нужно сохранить данные вставки в sqlite через ipc. Только после вставки в таблицу sqlite и получения успешной вставки, я добавлю в хранилище ngrx. Хотя хранилище обновляется данными вставки, но DOM не получает обновления, поэтому пользовательский интерфейс не показывает вставленный элемент. Если я вставил второй элемент, пользовательский интерфейс покажет предыдущий добавленный элемент.
Кажется, что цикл обнаружения угловых изменений завершен до того, как в хранилище ngRx происходят изменения данных
Но я не понимаю, что this.data $ получит новые данные emit из хранилища ngrx, но почему асинхронный канал шаблона не может обнаружить новые данные emit и повторно обработать шаблон?
Я также пытаюсь использовать inject 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 не обнаруживает изменения и пользовательский интерфейс не обновляется.