非常にシンプルな 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(); } }); }