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

在重新加载页面之前，离子存储值不会显示在HTML上。 我调查了一些其他人，他们也有同样的问题，但我发现的解决方案要么不起作用，要么由于离子版本的改变而不再起作用。例如，爱奥尼亚的事件系统

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';
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变量）。您需要取消订阅您的每一个订阅；这样做，否则你会冒风险

在template.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>

水果名称：
{{data.groutname}
安装日期：
{{data.installTime}
删除日期：
{{data.removeTime}

---

说明：由于存储结果是一个类似promise的对象，所以需要等待它解析。您可以通过对试图通过存储调用设置的变量

data2

的状态进行模板检查来实现这一点。它最初是未设置的，但在存储调用解决后，它被设置。此解决方案可能发生在angular lifecycle挂钩之外，因此，您最初看到的页面是空白的，然后在重新加载时，它工作正常。

感谢您的响应，但在页面未加载的情况下，这也会产生相同的结果。当我坐在可以在inspector控制台（f12）上查看的页面上时，数据最终加载。但是HTML页面在设置完数据2后，即使使用*ngIf=“data2”也不会改变。因此，数据加载时，您不会离开页面并返回，它只是在一段时间后出现？是的，在ngOnInit（）中，我有console.log（data）；它在控制台中显示数据及其包含的所有值。即使data2设置了值，HTML页面也不会显示该值，除非我更改了路由页面，然后返回。@win4win您是否尝试过使用角度更改检测器引用。它允许您强制angular检查组件中的数据更改并更新模板。我已经编辑了我的答案来反映这些变化。它奏效了，ChangeDector正是我所需要的！谢谢

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