1

我ngrx redux用来从 api 角度获取数据。我无法在select标签中循环获取的数据。以下是我所需的代码：

pfa.module.ts：

export class Pfa {
    id: number;
    area: string;
}

pfa.actions.ts：

import { Action } from '@ngrx/store';
import { Pfa } from '../../shared/pfa.module';

export enum PfaActionTypes {
    LOAD_PFA = "[Pfa] Load Pfas",
    LOAD_PFA_SUCCESS = "[Pfa] Load Pfas Success",
    LOAD_PFA_FAIL = "[Pfa] Load Pfas Fail",
}

export class LoadPfas implements Action {
    readonly type = PfaActionTypes.LOAD_PFA
}

export class LoadPfasSuccess implements Action {
    readonly type = PfaActionTypes.LOAD_PFA_SUCCESS
    constructor(public payload: Pfa[]) {}
}

export class LoadPfasFail implements Action {
    readonly type = PfaActionTypes.LOAD_PFA_FAIL
    constructor(public payload: string) {}
}

export type Action = LoadPfas | LoadPfasSuccess | LoadPfasFail;

pfa.effects.ts：

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Action } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { PrService } from 'src/app/api/services/profile.service';
import * as PfaActions from './pfa.actions';
import { Pfa } from '../../shared/pfa.module';

@Injectable()
export class PfaEffect {
    constructor( private action$: Actions, private prSer: PrService ) {}

    @Effect()
    loadPfas$: Observable<Action> = this.action$.pipe ( ofType<PfaActions.LoadPfas>(PfaActions.PfaActionTypes.LOAD_PFA), mergeMap((actions: PfaActions.LoadPfas) => this.prSer.getData().pipe( map( (pfas: Pfa[]) => new PfaActions.LoadPfasSuccess(pfas) ),
    catchError(err => of(new PfaActions.LoadPfasFail(err))) ) ) )
}

pfa.reducers.ts：

import * as pfaActions from './pfa.actions';
import * as fromRoot from '../../../app-states/app.state';
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { Pfa } from '../../shared/pfa.module';

export interface PfaState {
    pfa: Pfa[],
    loading: boolean,
    loaded: boolean,
    error: string
}

export interface AppState extends fromRoot.AppState {
    pfas: PfaState
}

export const initialState: PfaState = {
    pfa: [],
    loading: false,
    loaded: false,
    error: ""
}

export function pfaReducer ( state = initialState, action: pfaActions.Action ):
PfaState {
    switch(action.type) {
        case pfaActions.PfaActionTypes.LOAD_PFA: {
            return {
                ...state,
                loading: true
            }
        }
        case pfaActions.PfaActionTypes.LOAD_PFA_SUCCESS: {
            return {
                ...state,
                loading: false,
                loaded: true,
                pfa: action.payload
            }
        }
        case pfaActions.PfaActionTypes.LOAD_PFA_FAIL: {
            return {
                ...state,
                pfa: [],
                loading: false,
                loaded: false,
                error: action.payload
            }
        }
        default: {
            return state
        }
    }
}

const getPfaFeatureState = createFeatureSelector<PfaState>("pfas");

export const getPfas = createSelector(
    getPfaFeatureState,
    (state: PfaState) => state.pfa
);

export const getPfasLoading = createSelector(
    getPfaFeatureState,
    (state: PfaState) => state.loading
);

export const getPfasLoaded = createSelector(
    getPfaFeatureState,
    (state: PfaState) => state.loaded
);

export const getError = createSelector(
    getPfaFeatureState,
    (state: PfaState) => state.error
);

组件.ts：

import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import * as pfaACtions from '../../../ngrx/state/profilefucntionarea/pfa.actions';
import * as fromPfa from '../../../ngrx/state/profilefucntionarea/pfa.reducers';    

pfas$: Observable<Pfa[]>;

ngOnInit() {
   this.store.dispatch(new pfaACtions.LoadPfas());
   this.pfas$ = this.store.pipe(select(fromPfa.getPfas));
}

component.html：在这里，我什么都看不到。

<select id="selectFunctionArea" class="form-control custom-dropdown">
   <option *ngFor="let pfa of (pfas$ | async)" value="pfa.id"> {{pfa.area}}</option>
</select>

select在 html 中，我在框中看不到任何内容。

当我检查redux选项卡时，我可以看到如下：

pfas: {
    pfas: {
        loaded: false => true
        loading: true => false
      pfa: [
            0:{
            "id": 1,
            "area": "RDC"
            }
            1:{
            "id": 2,
            "area": "BB"
            }
            2:{
            "id": 3,
            "area": "All"
            }
        ]
    }
}

模块.ts：

export const reducers: ActionReducerMap<any> = {
  pfas: pfaReducer
};

@NgModule({
   StoreModule.forFeature('pfas', reducers),
});

我想通了，为什么会这样pfas->pfas->pfa，因为上面的代码。但是如果我要加载多个减速器怎么办？我认为，有 2pfas这就是为什么它没有在 html 中回显任何内容。请指导我，怎么了？

4

0 回答 0