Angular2 NGRX/商店视图未更新

很抱歉，还有一个Angular 2 view更新问题，但我无法在任何其他回答中找到答案。我在这里提到了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 { }

<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
                    })
            });
    }
}

我的应用程序组件

@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();
    }
}

@组件({
选择器：“我的应用程序”，
模板：需要（“./templates/my apps.html”）
})
导出类MyApps实现OnInit、OnDestroy{
apps={}；
变化=1；
用户应用程序订阅；
建造师(
专用应用程序服务：应用程序管理服务，
私人商店

这就是视图结束的地方。


奇数对吗？你可以看到页面是用NGRX/商店广播的第二个状态更新的，但不是包含真正的面包和黄油的最终状态（6个应用程序的列表）。到底为什么视图不能正确更新？
你能发布你的应用程序吗

我将重构它，使其不在Init方法中打开流。使用异步管道为您执行此操作。这也会处理取消订阅

比如：

HTML


我的应用程序
{{change}}
您当前没有任何已注册的应用程序。请单击“注册应用程序”开始

{{apps | json}

{{app.name}
说明：{{app.Description}}


TS

@组件({
选择器：“我的应用程序”，
模板：需要（“./templates/my apps.html”）
})
导出类MyApps实现OnInit、OnDestroy{
apps={}；
变化=1；
$userAppsSubscription：可观察；
建造师(
专用应用程序服务：应用程序管理服务，
私人商店：商店）{}
恩戈尼尼特（）{
this.userAppsSubscription=this.store
.选择（'userApps'）；
this.appsService.getUserApps（）；
}
Ngondestory（）{
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 ($userAppsSubscription | async).apps.available">
            <button class="block-button">
                <h3>{{app.name}}</h3>
                <p><strong>Description:</strong> {{app.description}}</p>  
            </button>
        </div>
    </div>
</div>

@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();
    }
}