원격 서비스에서 '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 함께 사용할 경우, 아무것도 작동합니다.
의견이 있으십니까?
이 문제점에 대해 문제점을 발견했습니다. 내 감속기가 업데이트 상태에 문제가 있습니다. 상태에 대한 참조가 흐트러지지 않고 선택자가 변경 사항을 감지 할 수 없습니다 –