Как обновить сумму из динамически созданных входов? - PullRequest
Новая
       81

Как обновить сумму из динамически созданных входов?

1 голос
/ 06 марта 2020

У меня есть несколько входов, которые создаются динамически (можно добавлять или удалять входы). и текстовое поле, которое показывает сумму входных данных. Как я могу прикрепить наблюдаемые динамически и как мой текст может подписаться на все из них?

Поскольку я не могу понять, как создавать и прикреплять наблюдаемые к полю или как получить к ним доступ, используя их идентификатор, возможно. У меня нет большого кода, чтобы отправить! Любой ввод?

Функция имеет l oop и возвращает список наблюдаемых 

    var source = Rx.Observable.fromEvent(cellVal, 'keyup',(evt) => evt.target.value).startWith(cellVal.value);
    arr.push(source); 
    }
    return arr;


    values = funct() //calls function that returns array of obervables
    var example = Rx.Observable.combineLatest(values);
    example.subscribe(val => {
        console.log('Sum:', val);
    });

The inputs can be created or deleted and sum shud be updated accordingly

1 Ответ

0 голосов
/ 07 марта 2020

Если вы хотите со временем добавлять / удалять наблюдаемые в массив, это означает, что вам нужно состояние (из-за добавления / удаления). Если вы хотите придерживаться rx js, единственный известный мне побочный эффект - использовать оператор scan . В следующем коде показана реализация:

Интерфейс 

interface MappableObservable <T>{
  key: number,
  observable: Observable<T>
}

Функции 

// Function that adds to an array of MappableObservables
const addToState = (update: MappableObservable<string>) => (state: MappableObservable<string>[]): MappableObservable<string>[] => 
  [...state, update];

// Function that deletes all items with given key from an array of MappableObservables
const deleteFromState = (key: number) => (state: MappableObservable<string>[]): MappableObservable<string>[] =>
  state.filter(item => item.key !== key);

// Function that executes the above add or delete function inside a scan
const scanFn = (state: MappableObservable<string>[], fn: (state: MappableObservable<string>[]) => MappableObservable<string>[]) =>
  fn(state)

Выполнение 

const DEFAULT_MAPPABLE_OBSERVABLE_STATE: MappableObservable<string>[] = [];
const add$: Subject<MappableObservable<string>> = new Subject();
const delete$: Subject<number> = new Subject();

const source$: Observable<string[]> = merge(
  add$.pipe(map(addToState)),
  delete$.pipe(map(deleteFromState))
).pipe(
  scan(scanFn, DEFAULT_MAPPABLE_OBSERVABLE_STATE),
  map(state => state.map(mappableObservable => mappableObservable.observable)),
  switchMap(observables => combineLatest(observables))
)

Добавить или удалить некоторые наблюдаемые к этому источнику $ 

add$.next({key: 1, observable: of('uno')}) // Output: 'uno'
add$.next({key: 2, observable: of('duo')}) // Output: 'uno', 'duo'
add$.next({key: 3, observable: of('tri')}) // Output: 'uno', 'duo', 'tri'
add$.next({key: 2, observable: of('duo-duo')}) // Output: 'uno', 'duo', 'tri' 'duo-duo'
delete$.next(2); // Output: 'uno', 'tri'

К вашему сведению: наблюдаемые только непосредственно, если вы воспроизводите их или используете (...) как я сделал в этом примере. Если у вас есть неповторяемые или мгновенные наблюдаемые, они будут излучать только тогда, когда они все недавно завершат

Запуск stackblitz

...