Question

我正在创建一个食谱应用程序，您单击按钮，它会将选择的成分添加到购物清单页面。我已经设法做到这一点，但我正在努力允许超过1个列表的配方，以及当我单击按钮添加它将显示但如果我返回并单击选项卡将不会显示任何内容。

我的按钮将商品添加到购物清单（详情页面）

<div class="ingredients"> 
    <h1>Ingredients</h1>
    <div class="shopping-list">
        <ion-icon name="ios-cart"></ion-icon>
        <h1 (click)="submit(api.ingredientLines)">Add to shopping list</h1> 
    </div>
    <ul>
        <li *ngFor="let item of api?.ingredientLines"><span>{{item}}</span></li>
    </ul>
</div>

.ts文件（详情页面）

submit(ingredientLines) {
    console.log(ingredientLines);
    this.navCtrl.push(ShoppingListPage, {ingredientLines: ingredientLines});
}

购物清单页面

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

shopping list.ts

export class ShoppingListPage {

  public ingredientLines;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.ingredientLines = navParams.get('ingredientLines');  
  }

  ionViewDidLoad() {
      console.log('ionViewDidLoad ShoppingListPage');
      console.log(this.ingredientLines);
  }

}

问题可见https://www.youtube.com/watch?v=r-R_9Tz7UUk&feature=youtu.be

创建购物清单 - 本地存储（Ionic 2 / Angular 2）

0 个答案: