angular - 类型 User[] 与类型 'User' ngrx angular 没有共同的属性
问题描述
我正在尝试使用ngrx
. 下面是相关代码:
user.actions.ts:
import { Action } from '@ngrx/store';
import { User } from 'src/app/api/models/user';
export enum UserActionTypes {
LOAD_USER = "[User] Load Pfas",
LOAD_USER_SUCCESS = "[User] Load Pfas Success",
LOAD_USER_FAIL = "[User] Load Pfas Fail",
}
export class LoadUser implements Action {
readonly type = UserActionTypes.LOAD_USER
}
export class LoadUserSuccess implements Action {
readonly type = UserActionTypes.LOAD_USER_SUCCESS
constructor(public payload: User[]) {}
}
export class LoadUserFail implements Action {
readonly type = UserActionTypes.LOAD_USER_FAIL
constructor(public payload: string) {}
}
export type Action = LoadUser | LoadUserSuccess | LoadUserFail;
user.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 * as UserActions from './user.actions';
import { UserService } from 'src/app/api/services/user.service';
import { User } from 'src/app/api/models/user';
import { Pfa } from '../../shared/pfa.module';
@Injectable()
export class UserEffect {
constructor( private action$: Actions, private userService: UserService ) {}
@Effect()
loadUser$: Observable<Action> = this.action$.pipe ( ofType<UserActions.LoadUser>(UserActions.UserActionTypes.LOAD_USER), mergeMap((actions: UserActions.LoadUser) => this.userService.ApiUsersValidateGet().pipe( map( (u: User[]) => new UserActions.LoadUserSuccess(u) ) --<here getting an error,
catchError(err => of(new UserActions.LoadUserFail(err))) ) ) )
}
用户.reducers.ts:
import * as userActions from '../user/user.actions';
import * as fromRoot from '../../../app-states/app.state';
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { User } from 'src/app/api/models/user';
export interface UserState {
user: User[],
loading: boolean,
loaded: boolean,
error: string
}
export interface AppState extends fromRoot.AppState {
user: UserState
}
export const initialState: UserState = {
user: [],
loading: false,
loaded: false,
error: ""
}
export function userReducer ( state = initialState, action: userActions.Action ):
UserState {
switch(action.type) {
case userActions.UserActionTypes.LOAD_USER: {
return {
...state,
loading: true
}
}
case userActions.UserActionTypes.LOAD_USER_SUCCESS: {
return {
...state,
loading: false,
loaded: true,
user: action.payload
}
}
case userActions.UserActionTypes.LOAD_USER_FAIL: {
return {
...state,
user: [],
loading: false,
loaded: false,
error: action.payload
}
}
default: {
return state
}
}
}
const getUserFeatureState = createFeatureSelector<UserState>("user");
export const getUser = createSelector(
getUserFeatureState,
(state: UserState) => state.user
);
export const getUserLoading = createSelector(
getUserFeatureState,
(state: UserState) => state.loading
);
export const getUserLoaded = createSelector(
getUserFeatureState,
(state: UserState) => state.loaded
);
export const getError = createSelector(
getUserFeatureState,
(state: UserState) => state.error
);
我在user.effects.ts
文件中收到以下错误:
“OperatorFunction”类型的参数不能分配给“OperatorFunction”类型的参数。类型“用户[]”与类型“用户”没有共同的属性
解决方案
我认为错误在这里:
map( (u: User[]) => new UserActions.LoadUserSuccess(u)
如果使用map()
,则遍历数据集。这意味着在您的map()
函数中,您只有一个用户作为参数。
尝试这个:
tap( (u: User[]) => new UserActions.LoadUserSuccess(u)
推荐阅读
- python - 显示估计器的所有参数,包括默认值
- microsoft-graph-api - 多租户应用程序的授权 API 响应中不存在刷新令牌
- javascript - 那里有一个 y 轴数据点,但每周图表中缺少 x 轴数据点
- docker - 如何清除与(kubernetes)k8s相关的容器?
- serial-port - 逆向工程串行协议
- node.js - 如何获取渲染的 html 的屏幕截图来创建 png?
- javascript - 运行 google 电子表格的 javascript 代码时,显示“TypeError: Cannot read property 'createEvent' of null”消息
- visual-studio - 当 ItemsSource 加载大数据时,Xamarin.Forms 会阻止 UI
- haskell - 模式绑定:为什么允许递归模式?
- vb6 - 在 Tally ERP9 响应 xml 中