Данные локального хранилища возвращают Undefined или Null в первый раз, пытаясь использовать их - PullRequest
Новая
       45

Данные локального хранилища возвращают Undefined или Null в первый раз, пытаясь использовать их

1 голос
/ 25 мая 2019

Я использую Ionic и пытаюсь использовать локальное хранилище, моя проблема в следующем ...

У меня есть форма входа в систему, что, когда процесс входа в систему проходит успешно, он сохраняет некоторые данные ответа сервера в локальное хранилище, а затем переходит на следующую главную страницу. Когда на главной странице запускается ngOnInit, я пытаюсь извлечь данные из локального хранилища и отобразить их в клиенте переменной вызова в моем HTML-файле. Но в первый раз я пытаюсь это сделать, в html-файле пространство, в котором переменная cliente должна быть пустой, и с помощью журнала консоли, чтобы увидеть значение, говорит Undefined.

Если после успешного входа в систему я проверяю данные в локальном хранилище, вся необходимая информация сохраняется и сохраняется там.

Если я обновлю страницу, она покажет все, как должно быть.

Я думаю, что это как-то связано с тем, что значения в localalstorage не готовы, когда я пытаюсь отобразить его на странице и когда я обновляю страницу, все готово сейчас

Я пробовал несколько вещей, но ни одна из них не работает. Это мой код, если любой из вас может помочь мне с идеями. ПРИМЕЧАНИЕ: Пожалуйста, извините , если вы видите какие-то странные вещи в моем коде, в настоящий момент я знаю, что это похоже на Франкенштейна, но я настолько изменил этот код, что не знаю, как заставить его работать ...

Main.ts 

import { Component, OnInit } from '@angular/core';
import { DataService } from './../../services/data.service';
import { CanActivate, Router,  ActivatedRouteSnapshot, RouterStateSnapshot,  ActivatedRoute } from '@angular/router';
import { AuthService } from './../../services/auth-service.service';
import { MenuController } from '@ionic/angular';

import { Storage } from '@ionic/storage';
import { GetService } from '../../get.service';

import { BarcodeScanner, BarcodeScannerOptions } from '@ionic-native/barcode-scanner/ngx';

@Component({
  selector: 'app-main',
  templateUrl: './main.page.html',
  styleUrls: ['./main.page.scss'],
})
export class MainPage implements OnInit {
  cliente: any;
  points: any;
  id: any;
  data: any;
  error: any;
  parsedJson: any;
  urlSearchParams: any;
  scannedData: {};

  constructor(private menu: MenuController, private router: Router, private dataService: DataService, private route: ActivatedRoute,
              public authService: AuthService, private storage: Storage, private newsService: GetService,
              private barcodeScanner: BarcodeScanner) {
    this.storage.get('ID').then((val) => {
      this.id = val;
      const urlSearchParams = new URLSearchParams();
      urlSearchParams.append('cliente', this.id);
      this.newsService
      .getData(`puntos?${urlSearchParams.toString()}`).subscribe(data => {
        this.data = data;
        if (this.data['Error'] === 200) {
          this.storage.set('Puntos', this.data['SaldoPuntos']);
        }
        // console.log(data);
      });
    });
    this.storage.get('Auth').then((val) => {
       console.log(val);
      if (val === 0 || val === null) {
        console.log('Logged Out');
        this.router.navigate(['login']);
        return;
      }
      if (val !== 0) {
        this.data = this.dataService.getjsonresult();
        this.storage.get('Nombre').then((val) => {
          this.cliente = val;
          // console.log('Your Name is', val);
        });
        this.storage.get('Puntos').then((val) => {
          this.points = parseInt(val);
          // console.log('Your Name is', val);
        });
        // console.log(this.data);
      }
    });
   }

  ngOnInit() {
    this.storage.ready().then(() => {
      this.storage.get('Nombre').then((val) => {
        this.cliente = val;
        // console.log('Your Name is', val);
      });
    });
    this.storage.get('Puntos').then((val) => {
      this.points = parseInt(val);
      // console.log('Your Name is', val);
    });
  }

  scanCode() {
    this.barcodeScanner.scan().then(barcodeData => {
      alert('Barcode data ' + JSON.stringify(barcodeData));
      this.scannedData = barcodeData;
    }).catch(err => {
      console.log('Error', err);
    });
  }


}

Основной HTML 

<ion-header>
  <ion-toolbar color="dark">
      <ion-buttons slot="start">
        <ion-menu-button contentId="content" autoHide="false"></ion-menu-button>
      </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons slot="end">
      <ion-button >
        <ion-icon slot="end" name="person" ></ion-icon>        
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <div class="container-fluid">
        <h1 style="text-align: center; color: white">MiCliente</h1><img src="../../../assets/icon.png"/> 
    </div>
    <!-- <div class="topright" style="position: fixed; padding-top: 50px;"><ion-icon name="arrow-up"></ion-icon><br>Registra tu compra</div> -->
    <div class="welcomeTextDiv">
        <h1 class="welcomeText">BIENVENIDO</h1><br><br>
      </div>
      <h5 style="font-size: 25px; margin: auto; color: red !important; text-transform: uppercase; text-align: center" class="errorMessage">
        {{ error }}
      </h5>
      <div style="margin-left: auto; margin-right: auto; width: fit-content;" *ngIf="!cliente">
        <ion-spinner></ion-spinner>
      </div>
      <div >
      <div class="userDiv">
        <h2 class="userText">{{ cliente }}</h2>
      </div>
      <div class="messageDiv">
        <h2 class="messageText">Felicidades has ganado {{ points }} puntos</h2>
      </div>
      </div>

      <div style="text-align: center;color: white">
      <h3>REGISTRA TU COMPRA</h3>
      <ion-button size="large" (click)="scanCode()" color="light">
          <ion-icon slot="icon-only" name="barcode"></ion-icon>
      </ion-button>  
      </div>
</ion-content>

Login.ts 

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { forkJoin, of, Observable } from 'rxjs';
import { forEach } from '@angular/router/src/utils/collection';
import { CanActivate, Router,   ActivatedRouteSnapshot, RouterStateSnapshot, NavigationExtras } from '@angular/router';
import { GetService } from '../../get.service';
import { ToastController, MenuController } from '@ionic/angular';
import { DataService } from './../../services/data.service';

import { AuthService } from './../../services/auth-service.service';

import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
  public usuario:any;
    public password:any;
    result: any =[];
    data: any;
    allData: Observable<any>;
  loginJson: any;
  tutorialComplete: any;

  constructor(public http: HttpClient, private router: Router, private GetService: GetService, public toastController: ToastController, public menuCtrl: MenuController, 
  private dataService: DataService, private storage: Storage, public authService: AuthService ) {

    // set a key/value
    this.storage.get('Auth').then((val) => {
      console.log(val);
      if (val === '0' || val === ' ' ){
        this.storage.set('ID', 0 );
        this.storage.set('Nombre', '');
        this.storage.set('Puntos', '0' );
        this.storage.set('Auth', '0' );
      } if ( val === '1'){
        console.log('Logged in');
         this.router.navigateByUrl('/menu/main');
        return;
      }
    });

   }

  ionViewWillEnter() {
    //this.menuCtrl.enable(false);
   }

   Login(){ 
    var hash = require('hash.js');
    var pass = hash.sha256().update(this.password).digest('hex');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('idusuario', this.usuario);
    urlSearchParams.append('password', pass);
    this.GetService.getData(`LOGINPREM?${urlSearchParams.toString()}`)
      .subscribe(async data => {
        this.result = JSON.stringify(data);   // get data in result variable
        this.allData = JSON.parse(this.result); // parse json data and pass json string
        this.dataService.setjsonresult(this.result);
        // alert(this.dataService.getjsonresult());
        this.storage.set('ID', this.allData['Cliente']);
        this.storage.set('Nombre', this.allData['Nombre']);
        this.storage.set('Puntos', this.allData['SaldoPuntos']);
        this.storage.set('Auth', 1 );
        this.authService.login();
        if (this.allData['Error']== 200) {
          const toast = await this.toastController.create({
            message: "Bienvenido " + this.allData['Nombre'],
            position: 'top',
            duration: 2000
          });
          toast.present();
          this.router.navigateByUrl('/menu');
          return false;
        } else {
          const toast = await this.toastController.create({
            message: "Codigo de Error: " + this.allData['Error'] + " Descripcion: " + this.allData['Descripcion'] ,
            position: 'top',
            duration: 2000
          });
          toast.present();
          this.router.navigateByUrl('login');
          return false;
        }   
      });
  }

  async finish() {
    await this.storage.set('tutorialComplete', true);
    await this.storage.set('ID', 0 );
    await this.storage.set('Nombre', '');
    await this.storage.set('Puntos', '0' );
    await this.storage.set('Auth', '0' );
    this.tutorialComplete = this.storage.get('tutorialComplete');
    this.router.navigateByUrl('/login');
  }

  ngAfterViewInit() {
  }

  ngOnInit() {
  }


}

Я даже пытался использовать службу в середине, чтобы убедиться, что данные были там и готовы с getname: 

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  data: any;
  jsonresult: any;
  userID: any;
  Points: any;

  constructor( private storage: Storage, ) {
   }
  // Json de Resultado de todos los procesos
  public setjsonresult(jsonresult: any) {
    this.jsonresult = jsonresult;

  }

  public getjsonresult() {
    return this.jsonresult;
  }

 public getPoints() {
    this.storage.get('Puntos').then((val) => {
      this.Points = parseInt(val);
    });
    return this.Points;
  }

  getName() {
    this.storage.get('Nombre').then((val) => {
      return val;
    });
  }
}

First display after login Second display after refresh the page or going to a different page and coming back

...