Как показать закусочную несколько раз в Angular - PullRequest
Новая
       86

Как показать закусочную несколько раз в Angular

0 голосов
/ 14 июля 2020

Я использую управление магазином в своем проекте Angular, и я пытаюсь несколько раз отобразить снэк-панель с сообщением об ошибке, когда пользователь пытается сохранить и когда возникает ошибка в запросе api.

Проблема Прямо сейчас у меня закусочная панель сообщения об ошибке отображается только один раз, и после этого она перестает появляться, когда пользователь пытается сохранить ее снова и снова. Мне нужно обновить sh браузер еще раз, если я хочу снова показать панель ошибок.

Design.component. html

import { selectChartError } from 'src/app/core/store/reducers/chart.reducer';

  ngOnInit(): void {
    this.selectChartError(true);
 }

  selectChartError(init){
    this.store.pipe(select(selectChartError)).pipe(takeUntil(this.death$)).subscribe(err => {
      if (err && !init) {
        this.snackbar.open('Error: '+ err, 'Dismiss',{duration: 2500});
        this.selectChart();  
        this.selectChartData();
      } init = false;
 });}

Effect.ts 

    updateChart$ = createEffect(() => this.actions$.pipe(
        ofType(ChartActionTypes.UpdateChart),
        switchMap((props: { chart: Chart }) => this.chartService.updateChart(props.chart).pipe( 
            map(chart => {
                return chartUpdated({ chart: chart})
            }),
            catchError(err => {
                if (err.error.statusCode == 400) {
                    return of(loadError({ error: err.error.message }));
                }
}),),)),)

1 Ответ

0 голосов
/ 16 июля 2020

Позвольте мне поделиться реальным рабочим примером, он о сохранении маршрутов (это настоящая работа для https://logtrip.com). Это очень похоже на ваш вариант использования:

Я определил эти три действия в этом Магазине маршрутов (их еще несколько).

itineraries.actions.ts : 

export const saveItinerary = createAction('[ITINERARY API] Save ITINERARY', props<{ payload: Itinerary }>());
export const saveItinerarySuccess = createAction('[ITINERARY API] Save ITINERARY SUCCESS', props<{ payload: Update<Itinerary> }>());
export const saveItineraryFail = createAction('[ITINERARY API] Save ITINERARY FAIL', props<{ payload: any }>());

Связанный эффект, тот, который вызывает API, определяется следующим образом:

itineraries.effects.ts: 

export class ItinerariesEffects {

  constructor(
    private actions$: Actions,
    private logger: LogService,
    private itineraryService: ItineraryService,
    private toastr: ToastrService
  ) { }

// Few other effects

@Effect()
  saveItinerary$: Observable<Action> = this.actions$.pipe(
    ofType(itineraryActions.saveItinerary),
    map(action => action.payload),
    mergeMap((itinerary: Itinerary) => {

      this.logger.verbose('EFFECTS:: saveItinerary: ', itinerary);
      return this.itineraryService.updateItinerary(itinerary).pipe(
        map(updatedItinerary => {
          this.showSuccessNotification();
          this.logger.verbose('EFFECTS:: updatedItinerary: ', updatedItinerary);

          return itineraryActions.updateItinerary({
            payload: {
              id: updatedItinerary.id,
              changes: updatedItinerary
            }
          });
        }),
        catchError(err => {
          this.showFailNotification();
          return of(itineraryActions.saveItineraryFail({ payload: err }));
        })
      );
    }
    )
  );


  private showSuccessNotification() {
    this.toastr.success('Ok');
  }

  private showFailNotification() {
    this.toastr.error('Error!');
  }
}

Как видите, этот код очень похож, единственная разница, которую я вижу, - это обработка ошибок и запуск действия.

  • Чтобы проверить, создается ли проблема во время обработки ошибок вы можете добавить запись, чтобы проверить, выглядит ли этот объект ошибки так, как ожидалось (возможно, ваш API имеет собственные ошибки)

  • Другой вариант тоже имеет смысл ... Я не понимаю ваш код на 100%, но я запускаю действия хранилища по-другому, вот как я бы запускал это действие сохранения в моем примере. У меня есть кнопка, которая выполняет этот метод: 

    saveItinerary() {
  this.store.dispatch(fromItineraries.saveItinerary({ payload: this.itinerary }));
}

И этот метод запускает действие всегда, при каждом нажатии, которое запускает эффект каждый раз, и, ну, если API не работает отображается тостер (так, чтобы ваша закусочная должна была)

Надеюсь помочь.

Хуан

...