'{ [key: string]: any; 类型的参数 }' 不可分配给“any[]”类型的参数

Question

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

Answer 1

The error indicates that you are trying to assign an object to a property of type array. In the line below:

this.dataSource.data = new MatTableDataSource(pokemons);

MatTableDataSource() expects an array, but seems like pockemons is not a proper array of objects. You can verify this for example by doing console.log(Array.isArray(pockemons)); .

Once you confirm that pockemons is an not an array of objects, you can work on making that object into the array of objects (or post a separate question).

You should also change the line above to this (drop .data ):

this.dataSource = new MatTableDataSource(pokemons);

Update

Upon closer inspection of your stackblitz, it seems like when pokemons is retrieved from the store, even though it's a series of objects, it is not coming in as an array of objects.

Answer 2

I am using lodash library to do a key value array

You are not creating an array at all, it's actually an object of objects, sample:

{
    "1": {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon/1/",
        "id": 1
    },
    "2": {
        "name": "ivysaur",
        "url": "https://pokeapi.co/api/v2/pokemon/2/",
        "id": 2
    }
}

I don't see why you would actually need to do this, and according to how your table is set up, it expects an array like you get from the API. Anyway you are using pokemonNumber to create the id for your pokemons, which you are using to fetch the individual data for each pokemon in PokemonLoadByQuantitySuccess .

So I would do:

on(pokemonsActions.PokemonsLoadSuccess, (state, { payload }) => (
  {
    ...state,
    pokemons: PokemonNumber.pokemonNumber(payload), // <<<<<<<<<< this instead
    // pokemons: keyBy(PokemonNumber.pokemonNumber(payload), 'id'),
    isLoading: false,
    quantityOfAllPokemons: payload.length
  }
)

Okay, then when fetching data for each pokemon, you are using concat , which is not suitable here, since you are then just concatenating the arrays. What you want is to attach data to the specific pokemon based on the id. This might be done cleaner, but at least this works:

on(pokemonsActions.PokemonLoadByQuantitySuccess, (state, { payload }) => (
  {
    ...state,
    // pokemons: keyBy( Object.values(state.pokemons).concat(payload), 'id'),
    // below instead!!
    pokemons: state.pokemons.map((p, i) => { return {... p, ...payload.find(i => i.id === p.id)}}),
    isLoading: false,
    initial: PokemonNumber.nextSearch(state.final, state.quantityOfAllPokemons, 1),
    final: PokemonNumber.nextSearch(state.final, state.quantityOfAllPokemons, 12)
  }
)

Finally, like in other answer drop data from:

this.dataSource = new MatTableDataSource(pokemons);

This seems to work.

Your forked STACKBLITZ

You might want to tweak the loading property in your store, currently images appear with delay (at least for me), when fetching all individual data for pokemons.