離子存儲值不顯示，除非我重新加載頁面

Question

大家好，我需要你的幫助。 我正在嘗試從存儲中獲取一個顯示我的購物車項目的數組，但我唯一的問題是在我重新加載頁面之前不會顯示存儲值。 請幫我。 謝謝。

購物車.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>

Answer 1

將代碼添加到 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);
      
    });
}