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