在重新加载页面之前，离子存储值不会显示在 HTML 上

Question

离子存储值不会显示在 HTML 上，直到页面重新加载。我调查了其他一些遇到同样问题的人，但我发现的解决方案要么不起作用，要么由于 Ionic 版本更改而不再起作用。一个例子是 Ionic 中的事件系统。

HTML: 显示姓名和两个日期

<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 = [];
            }
        });
      });
  });
}

}

第一次加载路由页面时

当我改变路由页面然后回到原来的。

Answer 1

在您的 .ts 文件中执行此操作，

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

}

解释：我不知道你为什么要用storage.ready()它不需要。我不知道你为什么要在存储调用中从未使用过的可观察对象中进行存储调用；将它们分开（除非您使用 param 变量）。您需要取消订阅您所做的每一个订阅；否则你会冒 client side memory leaks 的风险。

在您的模板中。html执行此操作，

<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>

解释：因为你的存储结果是一个类似promise的对象，你需要等待它解析。您可以通过对您尝试通过存储调用设置的变量 data2 的状态进行模板检查来做到这一点。它最初未设置，但在存储调用解析后设置。此解决方案可能发生在 angular 生命周期挂钩之外，因此您看到页面最初是空白的，然后在您重新加载时它工作正常。

在重新加载页面之前，离子存储值不会显示在 HTML 上

Ionic Storage value will not display on HTML until page is reloaded

angular

typescript

ionic-framework

events

ionic-storage