खरीददारी सूची लिस्टिंग नहीं/बचत 1 नुस्खा की तुलना में अधिक

Question

मेरा उद्देश्य है

1. एक खरीदारी की सूची है जो एक एपीआई से व्यंजनों खींच रहा है बनाएँ।
2. एक पृष्ठ से दूसरे पृष्ठ पर सामग्री लें।
3. पृष्ठ को रीफ्रेश/लोड करने के लिए पृष्ठ 1 से अधिक जोड़े जाने पर लोड करें।

मुद्दा मैं कर रहा हूँ

1. केवल 1 सामग्री लोड
2. स्पष्ट समारोह अब और जोड़े जाने की अनुमति नहीं दी जाएगी का सेट है।

पकाने की विधि पृष्ठ

// Loading Recipes 
///////////////////////////////////////////////////////////////////// 

loadDetails1(id){ 
    this.apiAuthentication.loadDetails(id) 
    .then(data => { 
     this.api = data; 
    }); 
} 

// Add to Shopping List 
///////////////////////////////////////////////////////////////////// 

submit(api) { 

    let toast = this.toastCtrl.create({ 
     message: 'Added to shopping list', 
     duration: 1000 
    }); 

    console.log(this.api); 

    this.storage.get('myData').then((api) => { 

     // add one igredient to the ingredientLines object 
     // if it's still a string use JSON.parse() on it 
     this.storage.set('myData', api).then(result =>{ 
      toast.present(); 
      console.log(api); 
     }); 
    }); 
} 

एचटीएमएल

<h1 (click)="submit(api?.ingredientLines)">Add to shopping list</h1> 
<ul> 
    <li *ngFor="let item of api?.ingredientLines"><span>{{item}}</span></li> 
</ul> 

खरीददारी सूची पृष्ठ

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

     setInterval(() => { 
     console.log(data); 
     },5000); 
    })); 
} 

एचटीएमएल

<ion-content padding> 
    <ion-card> 
     <ion-card-header> 
      {{api?.name}} 
     </ion-card-header> 

     <ion-list> 
      <ion-item> 
       <ul> 
        <li *ngFor="let item of api?.ingredientLines"> 
         <ion-label>{{item}}</ion-label> 
         <ion-checkbox></ion-checkbox> 
        </li> 
       </ul> 
      </ion-item> 
     </ion-list> 
     <button ion-button block full color="danger" (click)="clear(item)">Remove</button> 
    </ion-card> 
</ion-content> 

शॉपिंग सूची पृष्ठ लग रहा है तरह

दृश्य में दिखाया गया त्रुटि https://www.youtube.com/watch?v=BDS_XTdw2S0 आप देख सकते हैं कि जब मैं खरीदारी की सूची में कोई आइटम जोड़ने जब तक मैं एप्लिकेशन को बंद करने और उसे पुन: प्रारंभ अपडेट नहीं करता है। इसके अलावा केवल 1 आइटम है।

Answer 1

मुझे इन सभी को एक साथ बांधने और ऑब्जेक्ट्स के रूप में सभी उदाहरण बनाने के लिए एक टेम्पलेट का उपयोग करना पड़ा।

फ़ाइल .html

<template ngFor let-api [ngForOf]="shoppingList"> 
    <ion-card> 
     <ion-card-header> 
      {{api?.name}} 
     </ion-card-header> 
     <ion-list inset> 
      <ion-item *ngFor="let ingredient of api.ingredientLines"> 
       <ion-label>{{ ingredient }}</ion-label> 
       <ion-checkbox item-right></ion-checkbox> 
      </ion-item> 
     </ion-list> 
     <button ion-button block full color="danger" (click)="clear(api)">Remove</button> 
    </ion-card> 
</template> 

और .ts फ़ाइल

public submit(api: any) { 

    let toast = this.toastCtrl.create({ 
     message: 'Added to shopping list', 
     duration: 1000 
    }); 

    console.log(this.api); 
    var thisRecipe = this.api; 

    this.storage.get('shoppingList').then((shoppingList) => { 
     if(!shoppingList){ 
      shoppingList = []; 
     } 

     shoppingList.push(thisRecipe); 

     this.storage.set('shoppingList', shoppingList).then(result => { 
      console.log("Added to Shopping List", result); 
      toast.present(); 
     }); 
    }); 
} 

Answer 2

आप अपने संग्रहण को ओवरराइट कर रहे हैं, यही कारण है कि केवल 1 दिखाई देता है।

यह इस तरह दिखना चाहिए, और types इस्तेमाल करने की कोशिश promises

public submit(ingredientLines: any) { 

let toast = this.toastCtrl.create({ 
    message: 'Added to shopping list', 
    duration: 1000 
}); 

this.storage.get('myData').then((ingredientLines) => { 

    console.log(ingredientLines); 

    // add one igredient to the ingredientLines object 
    // if it's still a string use JSON.parse() on it 
    this.storage.set('myData', ingredientLines).then(result =>{ 
     toast.present(); 
    }); 
}); 
} 

तो

1. भंडारण से डेटा प्राप्त करें

2. डेटा

3. करने के लिए नए आइटम को लागू करें

   स्टोरेज के लिए नया डेटा सेट करें ई