Angular2 NGRX / Store视图未更新

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播出的第二个状态，但不包含最终状态，其中包含真正的面包和黄油（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();
    }
}