如何在 Angular 中使用商店显示成功的小吃店

Question

当请求状态为 400 时，我正在使用 store 来捕获错误并且已经实现了错误小吃栏消息，但我不确定如何在成功更新/保存时显示成功的小吃栏消息，所以如果可以的话，我将不胜感激获得任何帮助或建议。

我只是想创建成功的快餐栏消息，当用户单击保存按钮时 http 状态为 201 时显示“保存成功”。

设计.HTML

<button mat-flat-button class="button" (click)="saveChartClick()">Save</button>

设计.TS

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

selectChartError(){
    this.store.pipe(select(selectChartError)).pipe(takeUntil(this.death$)).subscribe(err => {
      if (err) {
        this.snackbar.open('Error: '+ err, 'dismiss', );
        this.selectChart();  
        this.selectChartData();
      }
    });
  }

saveChartClick() {
   this.store.dispatch(updateChart({chart: this.chart}));
}

效果.ts

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

Answer 1

最好和干净的解决方案是订阅 ngrx 操作并在调度 loadError 操作时显示错误

import { Actions } from '@ngrx/effects';
...
constructor(load$: Actions) {
    load$.ofType(chartActions.LOAD_ERROR).pipe(
          tap((_) => // display error here )
         )
        .subscribe();
}