Ioni c Значение хранилища не будет отображаться на HTML, пока страница не будет перезагружена

Question

Иони c Значения хранилища не отображаются на HTML, пока страница не будет перезагружена. Я искал других людей, у которых были такие же проблемы, но найденные решения либо не работают, либо перестают работать из-за изменений версии Ioni c. Примером может служить система событий в Ioni c.

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

}

Когда Я загружаю страницу маршрутизации в первый раз

Когда я изменяю страницу маршрутизации, тогда go возвращается к оригиналу.

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). Вам необходимо отписаться от каждой подписки, которую вы делаете; в противном случае вы рискуете утечки памяти на стороне клиента .

В вашем шаблоне. 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>

Объяснение: Поскольку ваш результат хранения представляет собой объект, похожий на обещание, вам нужно дождаться его разрешить. Вы можете сделать это, выполнив шаблонную проверку состояния переменной data2, которую вы пытаетесь установить с помощью вызова хранилища. Первоначально он не установлен, но после разрешения вызова хранилища он установлен. Это разрешение может происходить вне ловушек angular жизненного цикла, поэтому вы видите страницу изначально пустой, а затем при перезагрузке она работает нормально.