угловой с использованием магазина ngRx и асинхронного канала не получить обновление в DOM - PullRequest
0 голосов
/ 02 ноября 2018

Я использую асинхронный канал для наблюдаемых данных, отображаемых в моем шаблоне.

В моей машинописной компоненте 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 не обнаруживает изменения и пользовательский интерфейс не обновляется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...