0

在页面重新加载之前，Ionic Storage 值不会显示在 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 = [];
            }
        });
      });
  });
}

}

当我第一次加载路由页面时

在此处输入图像描述

当我更改路由页面时，请返回原始页面。

在此处输入图像描述

4

1 回答 1

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 变量）。您需要取消订阅您所做的每个订阅；否则你会冒客户端内存泄漏的风险。

在您的模板 .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您可以通过对您尝试通过存储调用设置的变量的状态进行模板检查来做到这一点。它最初是未设置的，但在存储调用解决后它被设置。此解决方案可能发生在角度生命周期挂钩之外，因此为什么您看到页面最初是空白的，然后当您重新加载它时工作正常。

于 2020-03-06T20:12:45.523 回答