前端之家

  1. 首页
  2. 问答

直到刷新（F5），角组件视图才会列出完整的NGRX状态有效负载

• 问答

我的组件视图有问题。我有一个事件模型持有一个用户数组。当我加载事件时，我在redux devtools中获得了这个有效负载。因此，我们所需的所有数据都在有效负载中可用。问题在于，im只能在刷新页面（f5）时列出事件的用户。有人在代码中看到问题了吗？我认为问题不在状态之内，因为我在有效负载中获取了正确的数据... 

**payload**
title(pin):"Lasergame"
description(pin):"Bring shoes with you"
location(pin):"Interpool"
creatorId(pin):1
users(pin): {users..}     //here is the array which contains the users
id(pin):1
type(pin):"[API: /event] Load Event success"

这是html的相关内容：

<div *ngIf="ev$ | async; let ev">
<div class="row">
 <div class="col-sm-8">
  <div class="tab-panel">
    <tabset class="member-tabset">
      <tab heading="Om evenemang">
        <h4 style="font-weight: bold;">Beskrivning</h4>
         <p>{{ ev.description }}</p>
          <ul *ngIf="ev.users"> 
           <li *ngFor="let item of ev.users">
            <p>
              {{ item.email }}
              {{ item.name }} 
            </p>
          </li>
           </ul> 
    </tabset>
  </div>
</div>
</div>
</div>

这是event.ts 

import { Component,OnInit,ChangeDetectionStrategy } from '@angular/core';

import { AppState } from 'src/app/core/state';
import { Store,select } from '@ngrx/store';
import * as fromEvent from '../../state/events';
import { Observable } from 'rxjs';
import { Event,User } from 'src/app/shared/models';

import * as eventactions from '../../state/events';
import { activatedRoute } from '@angular/router';

@Component({
  selector: 'ex-event-detail',templateUrl: './event-detail.component.html',changeDetection: ChangeDetectionStrategy.OnPush,styleUrls: ['./event-detail.component.scss']
})
export class EventDetailComponent implements OnInit {
  ev$: Observable<Event>;

  constructor(private store$: Store<AppState>,private route: activatedRoute) {}

  ngOnInit() {
    this.LoadEvent();
    console.log(this.ev$);
  }

  private LoadEvent(): void {
    this.store$.dispatch(new eventactions.LoadEvent(this.getclickedId()));
    this.ev$ = this.store$.pipe(select(fromEvent.getcurrentEvent));

  }

  private getclickedId() {
    var id = Number(this.route.snapshot.paramMap.get('id'));
    return id;
  }

}

这是我的ngrx代码。

events.actions.ts 

export class LoadEvent implements action {
  readonly type = actionTypes.LOAD_EVENT;

  constructor(public payload: number) {}
}

export class LoadEventSuccess implements action {
  readonly type = actionTypes.LOAD_EVENT_SUCCESS;

  constructor(public payload: Event) {}
}

events.effects.ts 

  @Effect()
  loadEvent$: Observable<action> = this.actions$.pipe(
    ofType<eventsactions.LoadEvent>(eventsactions.actionTypes.LOAD_EVENT),mergeMap((action: eventsactions.LoadEvent) =>
      this.eventResource.loadEvent(action.payload).pipe(
        map((event: Event) => new eventsactions.LoadEventSuccess(event)),catchError(err => of(new eventsactions.LoadEventError(err)))
     )
   )
 );

events.reducer.ts 

case eventsactions.actionTypes.LOAD_EVENT_SUCCESS: {
  return adapter.addOne(action.payload,{
    ...state,selectedEventId: action.payload.id
  });
}

events.selectors.ts 

const { selectAll } = adapter.getSelectors();

export const selectState = (state: AppState) => state.event.evs;


export const getcurrentEventId = createSelector(selectState,state => 
state.selectedEventId)

export const getcurrentEvent = createSelector(selectState,getcurrentEventId,state =>         
state.entities[state.selectedEventId])
events.adapter.ts

export const adapter: EntityAdapter<Event> = createEntityAdapter<Event>({
 selectId: (ev: Event) => ev.id
});
dzx1015 回答：直到刷新（F5），角组件视图才会列出完整的NGRX状态有效负载

您应按以下方式订阅activatedRoute.params：

export class EventDetailComponent implements OnInit,OnDestroy {
  subscription: Subscription;
  ev$: Observable<Event>;

  constructor(
    private activatedRoute: ActivatedRoute,private store$: Store<AppState>
  ) { }

  ngOnInit() {
    this.ev$ = this.store$.pipe(select(fromEvent.getCurrentEvent));

    this.subscription = this.activatedRoute.params.subscribe(params => {
      const id = params['id'];
      this.store$.dispatch(new eventActions.LoadEvent(+id));
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

Accessing URL parameters in Angular: Snapshot vs Subscription中的更多详细信息。

似乎您的getCurrentEvent选择器也有问题，您的代码应该是：

const { selectIds,selectEntities } = adapter.getSelectors(getState);

export const getCurrentEvent = createSelector(
  selectEntities,getCurrentEventId,(entities,currentEventId) => {
    return entities[currentEventId])
})

代替：

export const getCurrentEvent = createSelector(selectState,state => state.entities[state.selectedEventId])
,

这是我的ngrx代码

events.actions.ts 

export class LoadEvent implements Action {
  readonly type = ActionTypes.LOAD_EVENT;

  constructor(public payload: number) {}
}

export class LoadEventSuccess implements Action {
  readonly type = ActionTypes.LOAD_EVENT_SUCCESS;

  constructor(public payload: Event) {}
}

events.effects.ts 

  @Effect()
  loadEvent$: Observable<Action> = this.actions$.pipe(
    ofType<eventsActions.LoadEvent>(eventsActions.ActionTypes.LOAD_EVENT),mergeMap((action: eventsActions.LoadEvent) =>
      this.eventResource.loadEvent(action.payload).pipe(
        map((event: Event) => new eventsActions.LoadEventSuccess(event)),catchError(err => of(new eventsActions.LoadEventError(err)))
     )
   )
 );

events.reducer.ts 

case eventsActions.ActionTypes.LOAD_EVENT_SUCCESS: {
  return adapter.addOne(action.payload,{
    ...state,selectedEventId: action.payload.id
  });
}

events.selectors.ts 

const { selectAll } = adapter.getSelectors();

export const selectState = (state: AppState) => state.event.evs;


export const getCurrentEventId = createSelector(selectState,state => 
state.selectedEventId)

export const getCurrentEvent = createSelector(selectState,state =>         
state.entities[state.selectedEventId])

events.adapter.ts 

export const adapter: EntityAdapter<Event> = createEntityAdapter<Event>({
 selectId: (ev: Event) => ev.id
});
angularngrxpayloadstate
本文链接：https://www.f2er.com/2597987.html

大家都在问