Как использовать диалоги материалов в наблюдаемой последовательности труб - PullRequest
Новая
       25

Как использовать диалоги материалов в наблюдаемой последовательности труб

0 голосов
/ 09 апреля 2019

Для приложения, которое я переписываю из AngularJS, у меня есть последовательность действий: 

1) I got to the server to get a message  
2) I display the returned message in a generic dialog, with a Yes and No button.  

3-Yes) I go to the server to do something, proceed to 4  
3-No) I terminate the sequence  

4) Notfiy the user that the operation is complete.

У меня проблемы с переводом этой системы в Angular / React Observable, хоуер. Я хочу сделать что-то вроде этого: 

// Actual arguments are immaterial in this case...
this.webDataService.get('/api/GetEndUserMessage', args)
  .pipe(
    map((message: string) => {
      const config = new MatDialogConfig();
      config.data = {
        'title': 'Important',
        'message': message
      };
      const dialog = this.matDialog.open(GenericDialogComponent, config);
      // If Yes/Ok is clicked, return 'Ok'
      // If No/Cancel is clicked, return 'Cancel'

      return dialog.afterClosed();
    }),
    // PROBLEM AREA! ----------------------------------------------
    filter((dialogResult: string) => {
      if (dialogResult === 'Ok')
        return this.webDataService.post('/api/DoSomethingAwesome');
    }),
    filter((dialogResult: string) => {
      if (dialogResult !== 'Ok')
        return 'Cancelled'
    })
    // PROBLEM AREA! ----------------------------------------------
  )
  .subscribe((result: any) => {
    if (result === 'Cancelled')
      return;

    // Let the user know that the sequence is over.  How doesn't matter.
  });

Проблема в том, что, видимо, это не компилируется.

Мое понимание системы операторов React в лучшем случае шатко, и я не уверен, как вызвать Observable, созданный в результате вызова MatDialogRef.afterClosed().

Вопрос:
Каким образом я могу использовать результаты вызова MatDialogRef.afterClosed() в последовательности Observable .pipe?

1 Ответ

1 голос
/ 09 апреля 2019

Используйте switchMap, когда вам нужно изменить наблюдаемые потоки.Оператор map() просто заставит наблюдаемое испустить возвращенное значение. 

this.webDataService.get('/api/GetEndUserMessage', args)
  .pipe(
    switchMap((message: string) => {
        //...
        const dialog = this.matDialog.open(GenericDialogComponent, config);
        return dialog.afterClosed();
    }),
    switchMap((dialogResult: string) => {
        return (dialogResult === 'Ok')
            ? this.webDataService.post('/api/DoSomethingAwesome')
            : of('Cancelled')
    })
).subscribe((result: any) => { ... });

https://www.learnrxjs.io/operators/transformation/switchmap.html

...