ngrx 4-Selektor aktualisiert die Ansicht nicht

Question

Ich möchte "Server []" vom Remote-Dienst anzeigen. Momentan gibt Remote-Dienst nur 1 Datensatz zurück.

Wenn ich nur einfache 'Auswahl' verwende, werden die Werte in der HTML-Seite korrekt angezeigt. Immer wenn ich es mit createSelect verwende, werden sie nicht richtig angezeigt.

Folgendes ist mein Code.

reduziert/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> 

Remote-Dienst gibt nur 1 ' Server-Feld HTML-Seite zeigt folgendes Ergebnis:

Seltsam, funktioniert einfache Auswahl perfekt. Wenn ich es jedoch mit createSelect verwende, funktioniert nichts.

Haben Sie Vorschläge?

Answer 1

Ich habe ein Problem für dieses Problem gefunden. Mein Reducer hat Probleme beim Update-Status. Referenz für Zustand ist nicht geändert, und Selektor kann Änderungen nicht erkennen