带存储的离子 3

Question

我正在使用带存储的 ionic 3。

首先，我在 app.module.ts

中导入存储

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

imports: [
IonicStorageModule.forRoot()
]

我开发了电子商务app.If我使用存储将任何产品添加到购物车。

这是我的购物车页面代码。

   <ion-row class="apply-coupon" *ngFor="let p of Cartproducts;let i=index">
<ion-col col-4>
<img src="{{p.P_IMAGES[0].URL}}" alt="product2">
</ion-col>
<ion-col col-8>
<h1>{{p.P_TITLE}}</h1>
<p class="subtitle">Subtitle</p>
<p class="code">Code: 123</p>
<div>
<button (click)="cancel(i)">Cancel X</button>
</div>
</ion-col>  
</ion-row>

 this.items.push(item);
 this.storage.set('products',this.items);

项目是产品detail.and我已经显示了购物车数量。

this.storage.get('products').then((data) => {
     if(data != null)
     {
       this.Cartproducts=data;
       console.log(this.Cartproducts);

     }
    });

这是我的安慰值。

   [
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':2
    }
]

如果我需要删除最后一个产品。

 this.Cartproducts.splice(i, 1);
 console.log(this.Cartproducts);
 this.storage.remove('products');
 this.storage.set('products',this.Cartproducts);

这是我的安慰值。

[
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    }
]

我删除了'products'中的存储值我再次设置值products

我需要另一个product.so我要去产品页面添加产品。

但我的结果是

[
    {
        'Product_title':'Product name',
        'Product desc':'product dec',
        'id':1
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':2
    },
    {
        'Product_title':'Product name',
        'Product desc':'product dec'
        'id':3
    }
]

但实际上，我删除了第二个 product.Did 未设置为存储为什么？

多多指教，

谢谢

Answer 1

尝试

    this.storage.get('products').then((data) => {
     if(data == null)
     {
      data=[];
     }
this.items=data;//re-initialize the items array equal to storage value
this.items.push(item);
 this.storage.set('products',this.items);
    });

而不是

this.items.push(item); this.storage.set('products',this.items)

带存储的离子 3

ionic 3 with storage

ionic-framework

ionic2

ionic3

angular