时间戳

首页 > 解决方案 > 离子存储值不显示，除非我重新加载页面

angular - 离子存储值不显示，除非我重新加载页面

问题描述

大家好，我需要你的帮助。我正在尝试从存储中获取一个显示我的购物车项目的数组，但我唯一的问题是在我重新加载页面之前不会显示存储值。请帮我。谢谢。

购物车.ts

  cartData: any = [] ;
 
  baseProducts: any =[] ;

 constructor(private changeRef: ChangeDetectorRef, private storage: Storage) {
   
          

          this.storage.forEach((data)=>{
            
            let storedProducts = {};
            let parseFromStorage = JSON.parse(data);
            this.cartData.push(parseFromStorage);
            storedProducts['product_id'] = parseFromStorage.id;
            storedProducts['price'] = parseFromStorage.price;
            storedProducts['quantity'] = 1;
            this.baseProducts.push(storedProducts);    
      
        }).then(()=>{
          this.changeRef.detectChanges();
          console.log('parse product', this.baseProducts);
          
        });
         
         
          
   }

购物车.html

<ion-row *ngIf="cartData.length > 0">
      <ion-col size="12" *ngFor="let item of cartData; let j = index">
        <ion-card style="margin-top: 0; margin-bottom: 0;">
          <ion-list class="ion-no-padding">
            <ion-item>
              <ion-thumbnail slot="start" *ngIf="cartData">
                <img [src]="item.images[0].src">
              </ion-thumbnail>
              <ion-label>
                <h4><b>{{ item.name }}</b></h4>
                <p>${{baseProducts[j].price * baseProducts[j].quantity | number:'1.0-0'}}
                </p>
              </ion-label>
              <ion-icon color="danger" name="trash-bin-outline" (click)="removeFromCart(j, item)"></ion-icon>  
            </ion-item>
          </ion-list>
        </ion-card>
      </ion-col>
    </ion-row>

标签： angularionic-framework

解决方案

将代码添加到 ionViewWillEnter() 中。它每次都会调用你的存储。

constructor(private changeRef: ChangeDetectorRef, private storage: Storage) { }

//Writen code in below will execute everrytime.
ionViewWillEnter() {
  this.cartData = [];
  this.baseProducts = [];

  this.storage.forEach((data)=>{
        
        let storedProducts = {};
        let parseFromStorage = JSON.parse(data);
        this.cartData.push(parseFromStorage);
        storedProducts['product_id'] = parseFromStorage.id;
        storedProducts['price'] = parseFromStorage.price;
        storedProducts['quantity'] = 1;
        this.baseProducts.push(storedProducts);    
  
    }).then(()=>{
      this.changeRef.detectChanges();
      console.log('parse product', this.baseProducts);
      
    });
}

推荐阅读