Как выбрать из наблюдаемого или обычного значения

Question

Я путаю с Observable с тех пор, как начал работать с Angular (не AngularJS) и rxjs.

Observable - удобный и удобный способ организации информации. Однако это становится очень громоздким, когда смешивается с обычными значениями.

Например, предположим, у нас есть таблица данных, в которой в каждой строке есть флажок, а в строке заголовка есть флажок «выбрать все». Очень распространенный вариант использования.

Источник данных таблицы данных - Observable. Таким образом, псевдокод будет выглядеть так:

// sample.component.ts, suppose data source comes from ngrx store
rows$ = this.store.pipe(select(selectRows)); 
// sample.component.html
<table [dataSource]="rows$">

При такой настройке мы можем установить флажок для каждой строки данных следующим образом, сохраняя состояние включения / выключения в локальном состоянии:

// sample.component.ts
state = { selection: {} };
handleSelect(id, event) {
    this.state.selection[id] = event.checked;
}

Теперь вот проблемы:

1. Чтобы вычислить состояние «все выбрано или нет», мне нужно знать как rows$, так и this.state.selection, чтобы я мог определить, все ли строки выбраны или нет. Однако rows$ - это Observable, а this.state.seletion - обычный объект. Мои варианты:

   a) Преобразуйте this.state.selection в Observable, создав rxjs.Subject и обновив его значение в каждом handleSelect() обработчике событий, затем объедините этот новый Observable с rows$, чтобы вычислить «все выбранные» состояние

   b) Подписаться rows$ и преобразовать его в обычный массив rows, а затем вычислить состояние all selected в handleSelect()

2. Когда пользователь нажимает флажок «выбрать все», мне нужно обновить this.state.selection, чтобы назначить все идентификаторы true или false. Опять же, все идентификаторы должны быть получены из rows$, то есть Observable. Так что есть два варианта:

   a) Преобразовать событие «выбрать все» в Observable, затем объединить его с rows$ и обновить this.state.selection в качестве побочного эффекта

   b) То же, что и 1.b), подпишите rows$ на rows и выполните расчет в обработчике handleSelectAll()

Мне кажется, что самый простой способ - сначала преобразовать rows$ в rows и НЕ использовать Observable в компоненте. Потому что для использования Observable мне нужно преобразовать все остальное (состояние, события, ...) в Observable.

Но если я прав, почему ngrx предоставляет Observable интерфейс только?

Так что я думаю, что думаю что-то не так.

Буду признателен, если кто-нибудь расскажет об этом немного.

Answer 1

Ну, чтобы немного прояснить мою идею:

<table [dataSource]="rows$ | async">

Если вы не хотите этого делать, вы можете подписаться на свою наблюдаемую в своем компоненте (перед ее передачей в dataSource @Input).

Имейте в виду, что подписка на наблюдаемое приводит к подписке, от которой следует отказаться в подписке на жизненный цикл OnDestroy.

subscription: any;
ngOnInit() {
 this.subscription = this.rows$.pipe(take(1)).subscribe((result) => {
 this.rows = result;
 }); 
}

ngOnDestroy() {
this.subscription.unsubscribe();
}

Вы можете найти больше информации здесь: https://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/ Я бы, вероятно, выбрал асинхронный канал, поскольку это самый простой способ.