Выполнить функцию Typescript в соответствии со сценарием на Angular - PullRequest
Новая
       41

Выполнить функцию Typescript в соответствии со сценарием на Angular

0 голосов
/ 18 марта 2019

В моем приложении у меня есть два комбинированных списка в компоненте. Их значения по умолчанию null.

enter image description here

При выборе периода или пользователя значение отправляется в магазин. Это позволяет использовать период и выбранного пользователя в разных компонентах.

Combobox.component TO Store: 

  onSelectedWalletsPeriod(period: Period) {
    this.store.setSelectedWalletsPeriod(period);
  }

  onSelectedWalletsUser(user: User) {
    this.store.setSelectedWalletsUser(user);
  }

Магазин: 

export class MystoreComponentStore {

    private selectedWalletsPeriodSubject = new BehaviorSubject<Period>(null);
    private selectedWalletsUserSubject = new BehaviorSubject<User>(null);

    public selectedWalletsPeriod$ = this.selectedWalletsPeriodSubject.asObservable();
    public selectedWalletsUser$ = this.selectedWalletsUserSubject.asObservable();

    constructor() {}

    setSelectedWalletsPeriod(period: Period) {
        this.selectedWalletsPeriodSubject.next(period);
        this.selectedWalletSubject.next(null);

        /# DEBUG #/
        console.log('selectedPeriod:', period);
    }

    setSelectedWalletsUser(user: User) {
        this.selectedWalletsUserSubject.next(user);
        this.selectedWalletSubject.next(null);

        /# DEBUG #/
        console.log('selectedUser:', user);
    }
}

Store TO Result.component: 

export class ResultComponent implements AfterViewInit {

  selectedWalletsPeriod: Period = null;
  selectedWalletsUser: User = null;

  constructor(public store: MystoreComponentStore) { }

  ngAfterViewInit() {
    this.store.selectedWalletsPeriod$.subscribe(period=> this.selectedWalletsPeriod = period);

    this.store.selectedWalletsUser$.subscribe(user=> this.selectedWalletsUser = user);
  }
}

Чтобы отобразить список второго компонента, мне нужно выбрать период И пользователя. До этого момента все работает отлично.

Но то, что я хотел бы сделать, это выполнить функцию, когда пользователь И точка выбраны. Эта функция также будет выполняться при изменении значения одного из двух комбинированных списков.

Эта функция позволит мне получить список кошельков из моей базы данных на основе периода и пользователя.

Я не знаю, как это сделать. Если у вас есть идея, мне интересно.

Вот небольшой пример: Stackblitz ЗДЕСЬ

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 18 марта 2019

Вы можете использовать combineLatest, чтобы прослушать последнее значение любого из этих вариантов выбора, а затем отфильтровать те значения, для которых не установлены оба значения: 

combineLatest(this.store.selectedWalletsPeriod$, this.store.selectedWalletsUser$)
    .pipe(filter(([period, user]) => period && user))
    .subscribe(([period, user]) => console.log('period=' + period + ',user=' + user));

В приведенном выше примере должно регистрироваться значение, как только обазначения установлены.

См. также: документация на комбинатПоследний

1 голос
/ 18 марта 2019

Вы можете заархивировать ваши наблюдаемые:

https://www.learnrxjs.io/operators/combination/zip.html

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

Кстати: вы пробовали приставку или ngrx (приставка для углового)?Вам не нужно реализовывать собственную логику хранения / обработки действий / побочных эффектов / подписки.

...