angular - Angular2 NGRX/商店视图未更新

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