2017-11-28 9 views
0

원격 서비스에서 'Server []'를 표시하려고합니다. 현재 원격 서비스는 단 하나의 레코드만을 반환합니다.ngrx 4 선택기가보기를 업데이트하지 않습니다.

간단한 '선택'만 사용하면 html 페이지의 값이 올바르게 표시됩니다. createSelect와 함께 사용할 때마다 올바르게 표시되지 않습니다.

다음은 제 코드입니다.

는 '/ index.ts

export const reducers: ActionReducerMap<AppState> = { 
    servers: server.serverReducer, 
} 

export interface AppState { 
    servers: Server[]; 
} 


export const selectFeatureServers = createFeatureSelector<Server[]>('servers'); 

export const selectServers = (state: AppState) => state.servers ; 
export const selectAllServers = (state: AppState) => state.servers; 

export const selectConnectedServers = createSelector(
    selectFeatureServers, 
    (servers: Server[]) => servers.filter((server: Server) => true) 
) 
export const selectSummary = createSelector(
    selectFeatureServers, 
    (servers: Server[]) => servers.length); 

DEV-page.component.ts

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

import { Store } from '@ngrx/store'; 
import { Observable } from 'rxjs/Rx'; 

// import { AppState } from '../_reducers/index'; 
import * as fromServer from '../_actions/servers'; 
import { Server, Nvr } from '../models'; 

import * as fromRoot from '../_reducers'; 


@Component({ 
    selector: 'app-dev-page', 
    templateUrl: './dev-page.component.html', 
    styleUrls: ['./dev-page.component.scss'] 
}) 
export class DevPageComponent implements OnInit { 

    private servers$: Observable<Server[]>; 
    private connectedServers$: Observable<Server[]>; 
    private serverCount$: Observable<number>; 
    private server$: Observable<Server>; 
    private count$: Observable<number>; 

    constructor(private _store: Store<fromRoot.AppState>) { 
    this.count$ = this._store.select('servers').map(ss => ss.length); 
    this.servers$ = this._store.select(fromRoot.selectFeatureServers); 
    this.connectedServers$ = this._store.select(fromRoot.selectConnectedServers); 

    this.serverCount$ = this.servers$ 
     .do(s => console.log('do ', s.toString())) 
     .map(s => { 
     console.log('map ', s, ' length ', s.length); 
     s.forEach(x => console.log('map2 ', x)); 
     return s.length; }); 

    this.servers$.subscribe(s => { 
     console.log('subscribed', s, s.length) ; 
     s.forEach(x => console.log('map2 ', x)); 
    }); 
    this.serverCount$.subscribe(s => console.log('count sub', s)); 
    } 

    // this will fetch Server[] from my remote server 
    ngOnInit() { 
    this._store.dispatch({type: fromServer.ServerActionTypes.SERVER_FETCHED}); 
    } 
} 

DEV-page.component.html

<p> 
    Number of Server : {{ serverCount$ | async }} 
</p> 

<p> 
    Number of Count : {{ count$ | async }} 
</p> 
<p> 
    Server : {{server$ | async }} 
</p> 
<p> 
    Servers : {{ (servers$ | async).length }} 
</p> 
<ul> 
    <li *ngFor="let server of servers$ | async "> 
    Server Info : {{server.name}}, {{ server.status }} 
    </li> 
</ul> 
<p *ngFor="let server of connectedServers$ | async "> 
    Connec Server Info : {{server.name}}, {{ server.status }} 
</p> 

원격 서비스는 1 반환 감소 서버 '필드에 있습니다. Html 페이지는 다음과 같은 결과를 보여줍니다 :

Number of Server : 0 
Number of Count : 0 
Server : 
Servers : 1 
Server Info : SSM Server, Connected 

이상한, 단순한 선택 작품 완벽하게. 그러나, 그것을 createSelect 함께 사용할 경우, 아무것도 작동합니다.

의견이 있으십니까?

+0

이 문제점에 대해 문제점을 발견했습니다. 내 감속기가 업데이트 상태에 문제가 있습니다. 상태에 대한 참조가 흐트러지지 않고 선택자가 변경 사항을 감지 할 수 없습니다 –

답변

0

이 문제는 발견되었습니다. 내 감속기가 업데이트 상태에 문제가 있습니다. 상태에 대한 참조가 흐트러지지 않고 선택자가 변경 사항을 감지 할 수 없습니다.

+0

더 많은 것을 설명 할 수 있습니까 ... 같은 문제가 있습니다 – rijin

+0

업데이트가 아니라 객체를 교체해야합니다. 또는 상용구에 ngrx/entity를 사용할 수 있습니다. –