I have a very simple Ionic page. This page shows a status of a Reduxstate.In this page, I have a button in which I get into another page and there I can change the state and return back. If I return back the view will not update. I've spent quite a long time researching why that does not work. Unfortunately, no success.
Component
export class AssetDetailTechnicPage {
@select(['asset', 'asset'])
asset$: Observable<Asset>;
}
Template
<ion-content *ngIf="asset$ | async as asset">
<!--Leistung für Systemeinheit-->
<ion-card *ngIf="asset.assetSubKind.assetKindId === 2 && (asset.totalMemory || asset.hardDiskCapacity || asset.hardDiskTyp || asset.opticalDriveType
|| asset.bios || asset.displaySize || asset.cpu || asset.gpu)">
<ion-card-header>
<ion-icon name="build"></ion-icon> {{'PERFORMANCE' | translate}}
</ion-card-header>
<ion-card-content>
<ion-label color="primary" *ngIf="asset.totalMemory">
{{'MAIN_MEMORY' | translate}}:
</ion-label> {{asset.totalMemory}}
<ion-label color="primary" *ngIf="asset.hardDiskCapacity">
{{'HDD_CAPACITY' | translate}}:
</ion-label> {{asset.hardDiskCapacity}}
<ion-label color="primary" *ngIf="asset.hardDiskTyp">
{{'HDD_TYPE' | translate}}:
</ion-label> {{asset.hardDiskTyp}}
<ion-label color="primary" *ngIf="asset.opticalDriveType">
{{'OPTICAL_DRIVE' | translate}}:
</ion-label> {{asset.opticalDriveType}}
...... something similar goes on
Try to find out:
Maybe it has something to do with redux? Maybe the status does not change? Maybe that does not happen in the Angular Zone? That's why I rewrote it all a bit
@select(['asset', 'asset'])
asset$: Observable<Asset>;
asset: Asset;
constructor(private navCtrl: NavController) {
this.asset$.subscribe(asset => {
this.asset = asset;
console.log(NgZone.isInAngularZone());
});
}
editAsset() {
this.navCtrl.push(CreateAssetPage, {
edit: true
});
}
All changes are accepted and stored in the component. The console output is always true (always in the Angular zone). Why is the view not updated?
Last time I tried to trigger the changeDetection manually, but this led to an error.
constructor(private navCtrl: NavController, private changeRef: ChangeDetectorRef) {
this.asset$.subscribe(asset => {
this.asset = asset;
console.log(NgZone.isInAngularZone());
if(this.asset) {
this.changeRef.detectChanges();
}
});
}
If I take the if Statement out of the content everything works ... Whatever
<ng-container *ngIf="asset$ | async as asset">
<ion-content>
....