Angular不会更新视图(redux,ionic ...)

时间:2018-10-09 14:19:08

标签: angular ionic-framework ionic3 angular-redux supertab

我有一个非常简单的Ionic页面。此页面显示Reduxstate的状态。在此页面中,我有一个按钮可以进入另一个页面,在那里可以更改状态并返回。 如果返回,该视图将不会更新。我花了很长的时间研究为什么它不起作用。不幸的是,没有成功。

组件

export class AssetDetailTechnicPage {
    @select(['asset', 'asset'])
    asset$: Observable<Asset>;
}

模板

<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

尝试查找:

  • 该页面位于Ionic超级选项卡组件中。我首先认为这与插件ionic超级标签有关。我把它拿出来了,没有帮助
  • 也许与redux有关?也许状态不会改变?也许在Angular Zone中不会发生这种情况?这就是为什么我把它全部重写了

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

    所有更改均被接受并存储在组件中。控制台输出始终为true(始终在Angular区域中)。为什么视图未更新?

  • 上次我尝试手动触发changeDetection,但这 导致了错误。

    constructor(private navCtrl: NavController,  private changeRef: ChangeDetectorRef) {
        this.asset$.subscribe(asset => {
            this.asset = asset;
            console.log(NgZone.isInAngularZone());
            if(this.asset) {
                this.changeRef.detectChanges();
            }
        });
    }
    

1 个答案:

答案 0 :(得分:0)

如果我将if语句从内容中删除,则一切正常...无论如何

::item