在页面重新加载之前，Ionic Storage 值不会显示在 HTML 上

Question

Ionic Storage values aren't displaying on HTML until page gets reloaded. I looked into some other people who had the same problems but the solutions I found either don't work or don't work anymore due to Ionic version changes. An example would be the Event system in Ionic.

HTML: displays Name, and two dates

<ion-list>
    <div *ngFor="let data of data2">

    <ion-item lines="none">
        <ion-label text-left>
          Fruit Name:
        </ion-label>
        <ion-label text-right>
          {{data.FruitName}}
        </ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label text-left>
        Install Date:
      </ion-label>
      <ion-label text-right>
        {{data.installTime}}
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label text-left>
        Remove Date:
      </ion-label>
      <ion-label text-right>
        {{data.removeTime}}
      </ion-label>
    </ion-item>


    </div>

</ion-list>

.TS

import {ActivatedRoute} from '@angular/router';
import { Storage } from '@ionic/storage';


export class SummaryComponent implements OnInit {

 //My Variables

 data2;
 _idx;

constructor(
private route: ActivatedRoute,
private storage: Storage,
) { }

ngOnInit() {
this.route.params.subscribe(
  params => {

      /*Update Variables here*/

      this._idx = Temperature.__idx;
      this.storage.ready().then(() => {
        this.storage.get(this._idx).then(data=>{
          //if data exists
          if(data)
            {
             console.log("data read");
             this.data2 = data;
             console.log(data);
            }
            else
            {
              console.log("data is empty");
              this.data2 = [];
            }
        });
      });
  });
}

}

When I load the routing page for the first time

When I change routing page then go back to the original.

Answer 1

In your .ts file do this,

import {
    ActivatedRoute
} from '@angular/router';
import {
    Storage
} from '@ionic/storage';
import {
    ChangeDetectorRef
} from '@angular/core';


export class SummaryComponent implements OnInit, OnDestroy {

    //My Variables
    routeParams;
    data2;
    _idx;

    constructor(
        private route: ActivatedRoute,
        private storage: Storage,
        private changeRef: ChangeDectetorRef
    ) {}

    ngOnInit() {
        this.routePrams = this.route.params.subscribe(params => /** ... do whatever you need to do in here that involves params **/);

        this._idx = Temperature.__idx;                                                    
        this.storage.get(this._idx).then(data=>{
          //if data exists
          if(data)
            {
             console.log("data read");
             this.data2 = data;
             console.log(data);
            }
            else
            {
              console.log("data is empty");
              this.data2 = [];
            }
            this.changeRef.detectChanges();
        });
    }

    ngOnDestroy() {
        this.routeParams.unsubscribe();
    }

}

Explanation: I don't know why you're using storage.ready() it is not needed. I don't know why you're making a storage call inside an observable that is never used in the storage call; separate them (unless you are using the param variable). You need to unsubscribe from every subscription you make; do so otherwise you risk client side memory leaks .

In your template .html do this,

<ion-list *ngIf="data2">
    <div *ngFor="let data of data2">

        <ion-item lines="none">
            <ion-label text-left>
                Fruit Name:
            </ion-label>
            <ion-label text-right>
                {{data.FruitName}}
            </ion-label>
        </ion-item>

        <ion-item lines="none">
            <ion-label text-left>
                Install Date:
            </ion-label>
            <ion-label text-right>
                {{data.installTime}}
            </ion-label>
        </ion-item>

        <ion-item>
            <ion-label text-left>
                Remove Date:
            </ion-label>
            <ion-label text-right>
                {{data.removeTime}}
            </ion-label>
        </ion-item>


    </div>

</ion-list>

Explanation: Since your storage result is a promise-like object you need to wait for it to resolve. You can do that by doing a template check on the status of the variable data2 that you're trying to set via storage call. It is initially unset but after the storage call resolves it is set. This resolution might happen outside of the angular lifecycle hooks, hence why you're seeing the page initially blank and then when you reload it works fine.