购物清单 - 本地存储问题（Ionic 2）

Question

作为我的食谱应用程序的一部分，我正在创建一个购物清单，因此用户可以单击一个页面上的按钮，获取成分并显示在另一页面上。简单呃？不适合我。

我遇到的主要问题是，如果数据位于同一页面，我已经设法添加了本地存储。我在页面之间转移的地方，我遇到以下问题。

1. 只会添加第一个食谱。
2. 您必须关闭/刷新应用才能更改项目。

如果有人可以帮助我解决这个问题会很棒。

我有一个详细信息页面，您可以添加成分

Details.html

<h1 (click)="submit(api.ingredientLines)">Add to shopping list</h1> 

Details.ts

constructor(public navCtrl: NavController, public dataService: Data, private navParams: NavParams, public storage: Storage) {
    console.log(navParams.get('id'));
    this.id = navParams.get('id');
}

submit(ingredientLines) {
    console.log(ingredientLines);
    this.storage.set('myData', ingredientLines); 
}

购物-list.html

    <ion-item>
        <ul>
            <li *ngFor="let item of ingredientLines">
                <input type="checkbox">
                <span>{{item}}</span>
            </li>
        </ul>
    </ion-item>

购物-list.ts

export class ShoppingListPage {

    public ingredientLines;
  public recipes;

    constructor(public navCtrl: NavController, public modalCtrl: ModalController, public storage: Storage, public navParams: NavParams, public dataService: Data) {
    this.ingredientLines = navParams.get('ingredientLines');  
    this.getData();
}

getData() {
  this.storage.get('myData').then((data => {
    console.log(data);
    this.recipes = data;
  }));
}

按下提交时的console.log



我希望这能给你一个足够好的想法。