Angular2 NGRX/Store View Not Updating

Question

Angular 2ビューのアップデートに関する質問はもう申し訳ありませんが、私は他の回答で回答を見つけることができませんでした。私はビューが更新されていない理由を疑うにもかかわらず、ここでNGRX/Storeの使用について言及しています。ちょっと（少なくとも）一度更新するようですが、後ろにステップをとどめています。最後の（最新の）更新は影響を与えません。モデルが更新されると、前の状態がビューで更新されます。それは実際には気にしない。適切なコードを得ます。

関連するインストールパッケージ

"@angular/common": "2.0.0-rc.5", 
    "@angular/compiler": "2.0.0-rc.5", 
    "@angular/core": "2.0.0-rc.5", 
    "@angular/forms": "^0.3.0", 
    "@angular/http": "2.0.0-rc.5", 
    "@angular/platform-browser": "2.0.0-rc.5", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.5", 
    "@angular/router": "^3.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.5", 
    "@ngrx/core": "^1.0.1", 
    "@ngrx/store": "^2.0.1", 

私のメインのアプリモジュール

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     RouterModule.forRoot(AppRoutes) 
    ], 
    declarations: [ 
     ConsumerApp, 
     AppManagement, 
     MyApps, 
     AppRegistration, 
     AppDetails, 
    ], 
    providers: [ 
     HTTP_PROVIDERS, 
     STORE_PROVIDERS, 
     AppManagementService, 
    ], 
    bootstrap: [ 
     ConsumerApp 
    ] 
}) 
export class AppModule { } 

マイアプリのコンポーネント

@Component({ 
    selector: 'my-apps', 
    template: require('./templates/my-apps.html') 
}) 
export class MyApps implements OnInit, OnDestroy { 

    apps = {}; 
    change = 1; 
    userAppsSubscription; 

    constructor (
     private appsService: AppManagementService, 
     private store: Store<any>) {} 

    ngOnInit() { 

     this.userAppsSubscription = this.store 
      .select('userApps') 
      .subscribe(userApps => { 
       this.apps = Object.assign(this.apps, userApps); 
       this.change++; 
       console.log(this); 
      }) 

     this.appsService.getUserApps(); 
    } 

    ngOnDestroy() { 

     this.userAppsSubscription.unsubscribe(); 
    } 
} 

マイアプリテンプレート

<div id="my-apps"> 
    <h1>My Apps</h1> 
    <h2>{{change}}</h2> 
    <p>You currently don't have any registered applications. Click "Register an App" to get started.</p> 

    <p [hidden]="!loading">{{apps | json}}</p> 

    <div class="apps-container"> 
     <div class="col-md-4 col-sm-6" *ngFor="let app of apps.available"> 
      <button class="block-button"> 
       <h3>{{app.name}}</h3> 
       <p><strong>Description:</strong> {{app.description}}</p> 
      </button> 
     </div> 
    </div> 

</div> 

アプリケーション管理サービス

@Injectable() 
export class AppManagementService { 

    constructor (
     private http: Http, 
     private store: Store<any>) {} 

    getUserApps() { 

     this.store 
      .dispatch({ 
       type: RETRIEVE_USER_APPS, 
       payload: null 
      }) 

     return this.http 
      .get(ALL_APPS) 
      .toPromise() 
      .then(response => { 
       this.store 
        .dispatch({ 
         type: RECIEVE_USER_APPS, 
         payload: response.json() 
        }) 
      }) 
      .catch(response => { 
       this.store 
        .dispatch({ 
         type: RETRIEVAL_FAILURE_USER_APPS, 
         payload: null 
        }) 
      }); 
    } 
} 

「マイアプリ」ページでは、最初に、これがプリントアウトされてしまうものですヒットした場合。

とビューが終わる場所です。

奇数右？ページがNGRX/Storeからブロードキャストされた第2の状態で更新されたが、実際のパンとバター（6つのアプリケーションのリスト）を含む最後の状態では更新されていないことがわかります。なぜ地球上のビューが正しく更新されないのですか？

Answer 1

還元剤を投稿できますか？

これをリピートして、Initメソッドでストリームをアンラッピングしないようにします。これを行うには、非同期パイプを使用します。これは、購読解除を処理します。以下のような

何か：あなたはそれを

HTML

<div id="my-apps"> 
    <h1>My Apps</h1> 
    <h2>{{change}}</h2> 
    <p>You currently don't have any registered applications. Click "Register an App" to get started.</p> 

    <p [hidden]="!loading">{{apps | json}}</p> 

    <div class="apps-container"> 
     <div class="col-md-4 col-sm-6" *ngFor="let app of ($userAppsSubscription | async).apps.available"> 
      <button class="block-button"> 
       <h3>{{app.name}}</h3> 
       <p><strong>Description:</strong> {{app.description}}</p> 
      </button> 
     </div> 
    </div> 
</div> 

TS

@Component({ 
    selector: 'my-apps', 
    template: require('./templates/my-apps.html') 
}) 
export class MyApps implements OnInit, OnDestroy { 

    apps = {}; 
    change = 1; 
    $userAppsSubscription:Observable<string>; 

    constructor (
     private appsService: AppManagementService, 
     private store: Store<any>) {} 

    ngOnInit() { 

     this.userAppsSubscription = this.store 
      .select('userApps'); 

     this.appsService.getUserApps(); 
    } 

    ngOnDestroy() { 

     this.userAppsSubscription.unsubscribe(); 
    } 
}