Argument of type '{ [key: string]: any; }' is not assignable to parameter of type 'any[]'

I am trying to do a simple pokemon application using ngrx. I am using lodash library to do a key value array. I have had success in almost all steps i need to fill my MatTableDataSource, but i thing i am not knowing how to give the correct type to this. So i need to receive my data and fill my dataSource.data with that but i receive this error : "Argument of type '{ [key: string]: any; }' is not assignable to parameter of type 'any[]'. Type '{ [key: string]: any; }' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more". Because this, my table is not rendered. How to give the correct type to my MatTableDataSource or fix this issue?

Regards

My Observable that hear the reponse and set the value to the MatTableDataSource 'pokemon.component.ts'

public readonly pokemonsSubscription = this.store.pipe(select(fromPokemons.pokemons)).subscribe(pokemons => {
if (!pokemons || pokemons.length === 0) {
return;
}
//the error is below
this.dataSource.data = new MatTableDataSource(pokemons);

this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});


This is my pokemon storage 'pokemon.store.ts'

export const selectPokemonsState = (appState: AppState) => appState.Pokemons;

export const pokemons = createSelector(selectPokemonsState, (pokemonsState: PokemonsState) => pokemonsState.pokemons);
export const isLoading = createSelector(selectPokemonsState, (pokemonsState: PokemonsState) => pokemonsState.isLoading);
export const initial = createSelector(selectPokemonsState, (pokemonsState: PokemonsState) => pokemonsState.initial);
export const final = createSelector(selectPokemonsState, (pokemonsState: PokemonsState) => pokemonsState.final);


These are my actions 'pokemons.actions.ts'

export enum Action {
PokemonsLoad = '[Pokemons] Load',
PokemonsLoadSuccess = '[Pokemons] Load Success',
PokemonsLoadError = '[Pokemons] Load Error',
PokemonLoadByQuantity = '[Pokemon] Load By Quantity',
PokemonLoadByQuantitySuccess = '[Pokemon] Load By Quantity Success',
PokemonLoadByQuantityError = '[Pokemon] Load By Quantity Error',
}

export const PokemonsLoad = createAction(Action.PokemonsLoad);
export const PokemonsLoadSuccess = createAction(Action.PokemonsLoadSuccess, props<{ payload: Array<any> }>());
export const PokemonsLoadError = createAction(Action.PokemonsLoadError, props<{ payload: any }>());
export const PokemonLoadByQuantity = createAction(Action.PokemonLoadByQuantity, props<{ payload: { initial: number, final: number }}>());
export const PokemonLoadByQuantitySuccess = createAction(Action.PokemonLoadByQuantitySuccess, props<{ payload: Array<any> }>());
export const PokemonLoadByQuantityError = createAction(Action.PokemonsLoadError, props<{ payload: any }>());


My reducer 'pokemons.reducer.ts'

export interface PokemonsState {
pokemons: { [key: string]: any };
isLoading: boolean;
initial: number;
final: number;
quantityOfAllPokemons: number;
}

export const pokemonsInitialState: PokemonsState = {
pokemons: {},
isLoading: false,
initial: 1,
final: 24,
quantityOfAllPokemons: undefined,
};

const pokemonsReducer = createReducer(
pokemonsInitialState,
on(pokemonsActions.PokemonsLoadSuccess, (state, { payload }) => (
{
...state,
pokemons: keyBy(PokemonNumber.pokemonNumber(payload), 'id'),
isLoading: false,
quantityOfAllPokemons: payload.length
}
)
),
on(pokemonsActions.PokemonLoadByQuantitySuccess, (state, { payload }) => (
{
...state,
pokemons: keyBy( Object.values(state.pokemons).concat(payload), 'id'),
isLoading: false,
initial: PokemonNumber.nextSearch(state.final, state.quantityOfAllPokemons, 1),
final: PokemonNumber.nextSearch(state.final, state.quantityOfAllPokemons, 12)
}
)
),
on(pokemonsActions.PokemonsLoad, (state) => (
{
...state,
isLoading: true
}
)
),
on(pokemonsActions.PokemonLoadByQuantity, (state) => (
{
...state,
isLoading: true
}
)
),
);

export function reducer(pokemonState: PokemonsState | undefined, action: Action) {
return pokemonsReducer(pokemonState, action);
}

export const pokemonsFeatureKey = 'Pokemons';


The effects 'pokemons.effects.ts'

@Injectable()
export class PokemonsEffects {

loadAllPokemons$ = createEffect(() => this.actions$.pipe(
ofType(Action.PokemonsLoad),
switchMap((payload) => {
return this.pokemonsService.getAllPokemons()
.pipe(
map(pokemons => (PokemonsLoadSuccess({ payload: pokemons }))),
catchError((msg) => of(PokemonsLoadError({ payload: msg }))),
);
})
)
);

loadPokemonByQuantity$ = createEffect(() => this.actions$.pipe(
ofType(Action.PokemonLoadByQuantity),
switchMap((payload) => {
return this.pokemonsService.loadPokemonByQuantity(payload['payload']['initial'], payload['payload']['final'])
.pipe(
map(pokemons => (PokemonLoadByQuantitySuccess({ payload: pokemons }))),
catchError((msg) => of(PokemonLoadByQuantityError({ payload: msg }))),
);
})
)
);

success$ = createEffect(() => this.actions$.pipe(
ofType<{ type: string, payload: any }>(
// Action.PokemonsLoadSuccess,
// Action.PokemonLoadByQuantitySuccess,
),
tap(({ type, payload }) => { window.alert('Sucesso'); })
), { dispatch: false });

error$ = createEffect(() => this.actions$.pipe(
ofType<{ type: string, payload: string }>(
Action.PokemonsLoadError,
Action.PokemonLoadByQuantityError,
),
tap(({ type, payload }) => { window.alert('Erro'); }),
), { dispatch: false });

constructor(private actions$: Actions, private pokemonsService: PokemonsService) { }
}


My stackblitz about this error is below

stackblitz

Continue reading...