javascript - 如何使用ngrx状态管理编辑表单数据？错误我得到（尝试区分'[object Object]'时出错。只允许数组和可迭代“））

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: '[e-mail]',
    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$);

标签： javascriptangularngrxstate-managementangular-state-managmement

Answer 1

你得到这个错误是因为*ngFor="let tutorial of tutorials | async"，确保tutorials是一个数组（或可迭代的）。

EntityState将实体存储为对象，因此请确保使用正确的选择器，将实体作为数组返回，或用于Object.values将实体映射转换为数组。