how to edit form data with ngrx state management?error i get(Error trying to diff '[object Object]'. Only arrays and iterables are allowed"))

Question

import { createFeatureSelector, createSelector, Action } from "@ngrx/store";
import { Tutorial } from '../models/tutorial.model';
import * as TutorialActions from '../actions/tutorial.actions';
import { EntityState, EntityAdapter, createEntityAdapter } from "@ngrx/entity";
import * as fromRoot from "../app.state";

const initialState: Tutorial = {
    id: '151-115-015',
    name: 'Sadikur Rahman',
    email: 'rahmansadik29@yahoo.com',
    phone: '01718361554',
    age: 24,
    address: 'Sylhet, Bangladesh', 
}

export interface TutorialState extends EntityState<Tutorial> {
    selectedCustomerId: number | null;
}
export interface AppState extends fromRoot.AppState {
    tutorials: Tutorial;
  }

export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {

    switch (action.type) {
        case TutorialActions.ADD_TUTORIAL:
            return [...state, action.payload];

        case TutorialActions.REMOVE_TUTORIAL:
            state.splice(action.payload, 1)
            return state;

        case TutorialActions.EDIT_TUTORIAL:
            return (action.payload, {
                ...state,
                selectedCustomerId: action.payload
            });

        default:
            return state;
    }
}

const getCustomerFeatureState = createFeatureSelector<TutorialState>('tutorials');

export const getCurrentCustomerId = createSelector(
    getCustomerFeatureState,
    (state: TutorialState) => state.selectedCustomerId
  );

  export const getCurrentCustomer = createSelector(
    getCustomerFeatureState,
    getCurrentCustomerId,
    state => state.selectedCustomerId
  );

read.component.html

<div class="right" *ngIf="tutorials">

  <div class="card mb-2" style="width: 18rem;" *ngFor="let tutorial of tutorials | async">
    <h5 class="card-header">Student Information</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">{{ tutorial.id }}</li>
      <li class="list-group-item">{{ tutorial.name }}</li>
      <li class="list-group-item">{{ tutorial.email }}</li>
      <li class="list-group-item">{{ tutorial.phone }}</li>
      <li class="list-group-item">{{ tutorial.age }}</li>
      <li class="list-group-item">{{ tutorial.address }}</li>
    </ul>
    <button class="btn btn-danger" (click)="delTutorial(i)">Delete</button>
    <button class="btn btn-info" (click)="editTutorial(tutorial)">Edit</button>
  </div>
</div>

read.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { Tutorial } from './../models/tutorial.model';
import { AppState } from './../app.state';
import * as TutorialActions from './../actions/tutorial.actions';

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {
  tutorials: Observable<Tutorial[]>;

  constructor(private store: Store<AppState>) { 
    this.tutorials = store.select('tutorial');
    console.log(this.tutorials);
  }

  delTutorial(index){
    this.store.dispatch(new TutorialActions.RemoveTutorial(index) );
  }

  editTutorial(tutorial:any){
    const id = tutorial.id;
    this.store.dispatch(new TutorialActions.EditTutorial(id))
  }

edit.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { FormBuilder, FormGroup } from "@angular/forms";
import { Tutorial } from './../models/tutorial.model';
import { AppState } from './../app.state';
import * as TutorialActions from './../actions/tutorial.actions';
import { getCurrentCustomerId } from '../reducers/tutorial.reducer';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  //tutorialForm: FormGroup;
  tutorials:any;

  constructor(private fb: FormBuilder, private store: Store<AppState>) {}

  ngOnInit() {

    const customer$: Observable<any> = this.store.select(
      getCurrentCustomerId
    );

    console.log(customer$);

score 1 · Answer 1 · answered Nov 27 '19 at 07:31

You get this error because of *ngFor="let tutorial of tutorials | async", make sure tutorials is an array (or iterable).

EntityState stores your entities as an object, so make sure you're using the right selectors, that are returning the entities as an array, or use Object.values to transform an map of entities to an array.

how to edit form data with ngrx state management?error i get(Error trying to diff '[object Object]'. Only arrays and iterables are allowed"))

1 Answers1