Угловой модал с несколькими методами подписки - PullRequest
Новая
       2

Угловой модал с несколькими методами подписки

0 голосов
/ 18 декабря 2018

Я изо всех сил пытаюсь понять это, я прочитал, что вложенные подписки плохие.У меня есть модальная форма, которая получает список элементов для выбора из службы, затем, когда элемент выбран, модальное закрывается, и я хочу отправить выборку обратно в службу.Я прочитал много вопросов и ответов по Stackoverflow, но я не уверен, как это сделать? 

public click_AddModalItem(includeAll: boolean) {
    // Modal InitialState Variables
    const initialState = {
        title: 'Select from List',
        dataList: {},
    };
    // Get Source Data list from backend
    this.service.getSourceData(includeAll)
    .subscribe(
        data => {
            // Set Source data for Modal form
            initialState.dataList = data;
            this.modalRef = this.modalService.show(FrmSearchComponent, { initialState });
            this.modalRef.content.onClose
            .subscribe(modalResult => {
                // Get Modal result and add it to the backend
                console.log('Modal Result');
                console.log(modalResult);
                this.service.addSelectedItem(modalResult)
                .subscribe(
                    apiResponse => {
                    console.log(apiResponse);
                });
        });
    });
}

Ответы [ 3 ]

0 голосов
/ 18 декабря 2018

Вы можете сгладить его с помощью mergeMap или switchMap

примерно так: 

public click_AddModalItem(includeAll: boolean) {
    // Get Source Data list from backend
    this.service
      .getSourceData(includeAll)
      .pipe(
        map(dataList => ({
          title: 'Select from List',
          dataList
        })),
        switchMap(initialState =>
          this.modalService.show(FrmSearchComponent, { initialState })
        ),
        tap(modalRef => (this.modalRef = modalRef)),
        switchMap(modalRef => modalRef.content.onClose),
        switchMap(modalResult => this.service.addSelectedItem(modalResult))
      )
      .subscribe(apiResponse => {
        console.log(apiResponse);
      });
}
0 голосов
/ 19 декабря 2018

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

const resultObservable = this.service.getSourceData(includeAll)
    .pipe(mergeMap(param1 => {
        initialState.dataList = param1;
        this.modalRef = this.modalService.show(FrmSearchComponent, {initialState});
        return this.modalRef.content.onClose
        .pipe(map(param2 => {
            return param2;
        }));
}));
resultObservable.subscribe(result => {
    console.log(result);
});
0 голосов
/ 18 декабря 2018

Если это три отдельные задачи / наблюдаемые, которые не зависят друг от друга, тогда рассмотрите возможность использования forkJoin

let observable1(param1);
let observable2(param2);
let observable3(param3);

let joinedObservables = forkJoin(observable1, observable2, observable3).subscribe(x => {
  let result1 = x[0];
  let result2 = x[1];
  let result3 = x[2];

  ...
});

Если их результаты зависят друг от друга, вы можете использовать switchMap, flatMap, mergeMap, exhaustMap (проверка различий) 

let resultObservable =  return this.observable1().pipe(mergeMap((param1) => {
  return this.observable2().pipe(map((param1) => {

    ....        

    return <result>;
  }));
}));

resultObservable.subscribe(x => {
   ...
});
...