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

Question

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

this.validForWalletPresenter.change.pipe(
  filter(()=> confirm('are you sure you want to edit?')),
  switchMap(x => {
    return <--- calling the server here --->
  })
).subscribe(x => {
  <--- handle server response here --->
});

редактировать

проблема с подтверждением в том, что я не могу настроить его, это похоже на предупреждение, и это очень уродливо, мой вопрос, как я могу создать что-то, что действует как подтверждение, но показывает мой собственный мод, а не предупреждение?

Answer 1

Вот реализация того, что вы намереваетесь сделать:

Демоверсию можно найти здесь https://stackblitz.com/edit/angular-ti7ecy

const changeResult$ = this.options.change.pipe(
  tap(change => {
    // open the dialog here
  }),
  switchMap(change => {
    return dialogResult$.pipe( // observable of dialog result
      take(1),                 // take 1 to complete the dialog stream
      map(confirmed => {
        if (!confirmed) {
          // set the value to previous value
        }
        return {confirmed, value} // combine values of two streams
      }),
      tap(result => {
        // close the dialog and set the state of radio to result of above
        this.options.value = result.value;
      })
    )
  }),
  filter(result => result.confirmed), // filter out not confirmed
  map(result => result.value)         // map to value
);

changeResult$
  .pipe(switchMap(result => {
    // send the request
  }))
  .subscribe(resp =>{
    // handle response
  });

Answer 2

Вы можете запустить confirm прямо внутри filter:

const { fromEvent } = rxjs; // = require("rxjs")
const { filter } = rxjs.operators; // = require("rxjs/operators")

const button = document.getElementById('button');
const click$ = fromEvent(button, 'click');

const confirmed$ = click$.pipe(
  filter(() => window.confirm("Are you sure?"))
);

confirmed$.subscribe(e => console.log("Click confirmed!"));

<script src="https://unpkg.com/rxjs@6.3.3/bundles/rxjs.umd.min.js"></script>
<button id="button">Click on me</button>

Но имейте в виду, что confirm блокирует поток javascript и плохо работает с точки зрения UX. См Примечания MDN