Question

我正试图根据响应的结果来呈现错误消息，这个问题对NGRX还不是很熟悉，并且我正在同时渲染HTML。

这是我从console.log（payload）获得的回复

{termsAndConditions: {…}, establishments: Array(0), products: Array(0)}
establishments: []
products: []
termsAndConditions: {userId: "26e46299-93d2-42db-a300-1a99aa0839da", accepted: false, createdAt: "2019-08-06T10:36:11.000Z", updatedAt: "2019-08-06T10:36:11.000Z"}
__proto__: Object

<div *ngIf="(this.hasError$ | async)"
               class="page-wrap d-flex flex-row align-items-center"
               style="min-height: 90%">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                  <span class="display-1 d-block">{{'csa.main.error.title' | translate}}</span>
                  <div class="mb-4 lead">{{'csa.main.error.content' | translate}}</div>
                  <!-- <a class="btn btn-link">Go Back</a> -->
                </div>
              </div>
            </div>
          </div>
          <div *ngIf="(this.hasEstablishmentError$ | async)">
            teste
          </div>

    this.hasError$ = this.mainStore.select(fromMain.getMainError)
    this.hasEstablishmentError$ = this.mainStore.select(fromMain.getEstablishmentError)

主选择器

//Establishment Error
export const getEstablishmentError = createSelector(
  getModuleState,
  (stateMain: MainState) => stateMain.termsConditions.hasEstablishmentError
)

动作

export class EstablishmentFailed implements Action {
  readonly type = TermsActionTypes.ESTABLISHMENT_FAILED
  constructor(public payload?: { error: HttpErrorResponse }) {}
}

效果

// ----------------- Terms and Conditions -----------------
  @Effect()
  public termsConditions$ = this.actions$.pipe(
    ofType(TermsActions.TermsActionTypes.TERMS_CONDITIONS_ATTEMPT),
    mergeMap(() =>
      this.auth.bootstrap().pipe(
        map((payload: BootstrapResponse) => {
          console.log(payload)
          return payload.establishments && payload.establishments.length > 0
            ? new TermsActions.TermsConditionsSuccess({ response: payload })
            : new TermsActions.TermsConditionsFailure()
        }),
        catchError(error => of(new TermsActions.EstablishmentFailed({ error })))
      )
    )
  )

减速器

case TermsActionTypes.TERMS_CONDITIONS_FAILURE: {
      return { ...state, loading: false, hasBootstrapError: true, hasEstablishmentError: true }
    }

    case TermsActionTypes.ESTABLISHMENT_FAILED: {
      return { ...state, loading: false, hasEstablishmentError: true }
    }

我知道问题出在效果上，而reducer既具有错误，也可以，但是如果我尝试更改效果，我的应用程序将出现其他错误，我只想有条件地呈现HTML。

请帮忙吗？

基于效果响应的HTML渲染

0 个答案: