Angular 类型用户[]没有与类型'；相同的属性；用户'；ngrx角度

我正在尝试使用

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;

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))) ) ) )
}

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:

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;

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))) ) ) )
}

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
);

从'@angular/core'导入{Injectable}；
从'@ngrx/effects'导入{Actions，Effect，of type}；
从'@ngrx/store'导入{Action}；
从'rxjs'导入{可观察的}；
从'rxjs/operators'导入{map，mergeMap，catchError}；
从“/user.actions”导入*作为用户操作；
从'src/app/api/services/user.service'导入{UserService}；
从'src/app/api/models/User'导入{User}；
从“../../shared/Pfa.module”导入{Pfa}；
@可注射（）
导出类用户效应{
构造函数（私有操作$：操作，私有用户服务：用户服务）{}
@效果（）
loadUser$：Observable=this.action$.pipe（ofType（UserActions.UserActionTypes.LOAD\u USER），mergeMap（（actions:UserActions.loadUser）=>this.userService.apiursvalidateget（）.pipe（map（（u:USER[]）=>new UserActions.LoadUserSuccess（u））--（new UserActions.LoadUserFail（err）））
}

user.reducers.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;

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))) ) ) )
}

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
);

import*作为来自“../user/user.actions”的用户操作；
从“../../../app states/app.state”以root格式导入*；
从'@ngrx/store'导入{createFeatureSelector，createSelector}；
从'src/app/api/models/User'导入{User}；
导出接口用户状态{
用户：用户[]，
加载：布尔，
已加载：布尔，
错误：字符串
}
导出接口AppState扩展自root.AppState{
用户：UserState
}
导出常量initialState:UserState={
用户：[]，
加载：false，
加载：false，
错误：“
}
导出函数userReducer（state=initialState，action:userActions.action）：
用户状态{
开关（动作类型）{
案例userActions.UserActionTypes.LOAD\u用户：{
返回{
……国家，
加载：正确
}
}
案例userActions.UserActionTypes.LOAD\u USER\u成功：{
返回{
……国家，
加载：false，
是的，
用户：action.payload
}
}
案例userActions.UserActionTypes.LOAD\u USER\u失败：{
返回{
……国家，
用户：[]，
加载：false，
加载：false，
错误：action.payload
}
}
默认值：{
返回状态
}
}
}
const getUserFeatureState=createFeatureSelector（“用户”）；
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”类型的参数。类型“User[]”没有与相同的属性 键入“用户”

---

我认为错误在这里：

map（（u:User[]）=>newuseractions.LoadUserSuccess（u）

如果使用

map（）

，则需要迭代数据集。这意味着在

map（）

函数中，只有一个用户作为参数

试试这个：

---

tap（（u:User[]）=>new-UserActions.LoadUserSuccess（u）

请正确设置效果代码的格式。您确定这一点吗。userService.ApiUsersValidateGet（）返回一个可观察和不可观察的值我这样做了

map（（u:User）=>new UserActions.LoadUserSuccess（u）

但是仍然有一个错误

当前它需要一个用户数组，所以您可能也想修复它。

-如何解决？我不知道该类还用于其他什么。如果没有其他原因，只需将LOAD\u user\u SUCCESS构造函数的参数更改为

构造函数（公共负载：user）{}

它在reducer中使用，在那里给出错误！如果我执行

构造函数（公共负载：User）{}

此错误：

类型“User”的参数不能分配给类型“User[]”的参数。类型“User”缺少类型“User[]”中的以下属性：长度、弹出、推送、concat和其他26个属性