Question

我想显示＆＃39;服务器[]＆＃39;来自远程服务。目前，远程服务仅返回1条记录。

如果我只使用简单的＆＃39;选择＆＃39;，html页面中的值会正确显示。每当我在createSelect中使用它时，它们都无法正确显示。

以下是我的代码。

reduce / 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＆＃39;服务器＆＃39;领域。 Html页面显示以下结果：

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

奇怪的是，简单的选择非常有效。但是，如果我将它与createSelect一起使用，则无效。

你有什么建议吗？

ngrx 4选择器不更新视图

0 个答案: