Ionic 2 में पृष्ठों में उत्पाद श्रेणियों को लोड करने के लिए फ़िल्टर या पाइप का उपयोग करें?

Question

मैं 6 पृष्ठों के साथ एक आयनिक 2 ऐप बनाना चाहता हूं, मुझे यकीन है कि अलग-अलग श्रेणी पृष्ठों के लिए पाइप या फ़िल्टर का उपयोग करना है या कोड जो मुझे करने की ज़रूरत है।

प्रत्येक श्रेणी पृष्ठ "एप्पलकैट" श्रेणी द्वारा परिभाषित प्रासंगिक उत्पादों को लोड कर सकता है।

https://sheetsu.com/apis/v1.0/04c2d2906a10 https://docs.google.com/spreadsheets/d/1RNLXsxTFymqRwq_S538qX1p1PAEDIEA6s5sV8etkfLU/edit?usp=sharing

अवलोकन

6 पृष्ठों

: नीचे एपीआई, Google शीट के माध्यम से स्प्रेडशीट प्रारूप में उत्पादों और एक बहुत जल्दी मुखपृष्ठ mockup विचार के प्रदर्शन है

• घर - एन applecat श्रेणी
• कुंजीपटल के तहत लोड iphone के रूप में सूचीबद्ध सभी वस्तुओं - applecat श्रेणी के अंतर्गत भार ipad के रूप में सूचीबद्ध सभी आइटम
• iphone - ओ उत्पादों लोड करने के लिए की जरूरत है - बस पृष्ठों
• allproducts के लिए लिंक सभी उत्पादों -loads
• ipad - applecat श्रेणी
• लैपटॉप के तहत iphone के रूप में सूचीबद्ध सभी वस्तुओं को लोड करता है applecat श्रेणी के अंतर्गत iphone के रूप में सूचीबद्ध सभी आइटम -loads

परिदृश्य में (संभावित उपयोगकर्ता प्रवाह)

उपयोगकर्ता, एप्लिकेशन के खुलने पर घर पर क्लिक करता है तो Ipad श्रेणी लिंक (भार सभी Ipad उत्पादों) फिर वापस घर के लिए आता है सभी (भार सभी उत्पादों) पर क्लिक करने के फैसला करता है, एक और पृष्ठ पर वापस और क्लिक्स ....

समस्या

यह स्मृति/कंसोल में 2 सरणियों लोड होगा? क्या श्रेणी पृष्ठ फ़िल्टर या पाइप का उपयोग करना चाहिए? मेरे मौजूदा एपीआई कॉल और उत्पाद सूची सरणी के संबंध में कोड को पाइप/फ़िल्टर के लिए कैसे देखना चाहिए?

प्रदाता

getRemoteData(): any{ 
     return this.http.get('https://sheetsu.com/apis/v1.0/04c2d2906a10') 
       .map(res => res.json()); 
} 

सूची पृष्ठ

@Component({ 
selector: 'page-master', 
templateUrl: 'master.html', 
providers: [Sheetsu] 
}) 
export class MasterPage { 

// declare publicly accessible variable 
public sheetsuData: any; 

constructor(public navCtrl: NavController, public navParams: NavParams, public sheetsuService: Sheetsu) {} 

ionViewDidLoad() { 
    this.sheetsuService.getRemoteData() 
    .subscribe(response => { 
    // assign variable (async) 
    this.sheetsuData = response; 
    }); 
} 

मैं फिर सेट करता है के साथ फिल्टर का एक उदाहरण है, लेकिन यकीन नहीं है कि क्या है कि इस स्थिति में लागू होता है देखा था?

resetData(){ 
    this.modifiedData = JSON.parse(JSON.stringify(this.originalData)); 
    } 

    filterData(){ 
    this.modifiedData = this.modifiedData.filter((youtuber) => { 
     return youtuber.subscribers > 1000000; 
    } 
    } 

बहुत कम श्रेणी पृष्ठों के साथ, शायद प्रत्येक पृष्ठ के लिए एक पाइप सबसे अच्छा विकल्प होगा? यदि उपयोगकर्ता सभी 6 पृष्ठों को ब्राउज़ करते हैं तो बस एकाधिक API कॉल की संभावित समस्या।

पसंदीदा बाउंटी उत्तर: पाइप/फ़िल्टर/सेवा के लिए कोड, सर्वोत्तम समाधान पर सलाह और क्यों, जिथब में एक बुनियादी कार्य उदाहरण बेहतर है (प्रदाता के लिए एपीआई कॉल और सूची टीएस कोड ऊपर है)।

इस के लिए

Github रेपो देखी और से https://github.com/jones98/4cat

वर्तमान स्थिति (पूर्व श्रेणी में काम कर रहे पृष्ठों) में अनुप्रयोग के वीडियो काँटेदार किया जा सकता है https://drive.google.com/file/d/0B0QBawqyq1vPZ0o4WEpaa0o0azQ/view

Answer 1

पर देखी जा सकती है आप एक ऐसी सेवा बना सकते हैं कि कैश डेटा (शायद 5 मिनट, 30 मिनट, एक घंटे, या किसी भी समय अंतराल जो आपके आवेदन के संदर्भ में समझ में आता है) ताकि बहुत से http अनुरोध करने से बचने के लिए, और केवल वही लौटाएगा जो आपको चाहिए ताकि आप इसका उपयोग कर सकें सीधे कुछ भी फ़िल्टर किए बिना, घटक/दृश्य में।

यह न केवल सर्वर पर किए गए बहुत से बेकार http अनुरोधों को बचाएगा, बल्कि यह ऐप को तेज़ी से भी बनाएगा क्योंकि स्थानीय डेटा का उपयोग अधिकांश बार उपयोगकर्ता द्वारा उत्पाद पृष्ठों को खोलने के लिए किया जा रहा है।

के आप पहले से ही उत्पादों के लिए एक वर्ग है मान लेते हैं:

export class ProductModel { 
    public aw_deep_link: string; 
    public product_name: string; 
    public apple_cat: string; 
    //... 
} 

तो हम इस तरह हमारे कैश मॉडल बना सकते हैं:

class ProductCache { 
    public products: Array<ProductModel>; 
    public timestamp: number; 

    public isValid(): boolean { 
     if(!this.products) { 
      return false; 
     } 

     let isExpired = Date.now() - this.timestamp > 1800000; // 30 min 
     return !isExpired; 
    } 
} 

और फिर हम अपने ProductCategoryService में उपयोग कर सकते हैं

// Angular imports 
import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

// Rxjs imports 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class ProductCategoryService { 

    private cache: ProductCache; 
    private apiUrl: string = 'https://sheetsu.com/apis/v1.0/04c2d2906a10'; 

    constructor(private http: Http) { 
     this.cache = new ProductCache(); 
    } 

    public getAll(): Observable<Array<ProductModel>> { 
     if(this.cache.isValid()) { 
      // Return the products from the cache 
      return Observable.of(this.cache.products); 
     } 

     // Cache is empty/expired, so we need to make the http request 
     return this.http.get(this.apiUrl).map(res => res.json()).map(data => { 
      // Save the data in the cache for the next time 
      this.cache.products = data; 
      this.cache.timestamp = Date.now(); 

      // Return the list of (all) products 
      return this.cache.products; 
     }); 
    } 

    public getIpadProducts(): Observable<Array<ProductModel>> { 
     return this.getAll().filter((product: ProductModel) => { 
      return product.apple_cat.toLowerCase() === 'ipad'; 
     }); 
    } 

    public getIphoneProducts(): Observable<Array<ProductModel>> { 
     return this.getAll().filter((product: ProductModel) => { 
      return product.apple_cat.toLowerCase() === 'iphone'; 
     }); 
    } 

    // ... 
} 

और फिर प्रत्येक पृष्ठ में सही विधि को कॉल करें, और एक http अनुरोध होगा उत्पाद के कैश की वजह से केवल एक बार (या इस उदाहरण में हर 30 मिनट) बनाया गया।

सिंटैक्स त्रुटियों या टाइपो (मैं सीधे एसओ जवाब में कोडित) हो सकता है लेकिन यह आपको दिए गए परिदृश्य से निपटने के तरीके के बारे में विचार देना चाहिए। कृपया मुझे बताएं कि कुछ ठीक से काम नहीं करता है, इसलिए मैं आपको यह तय करने में मदद कर सकते हैं ...

अद्यतन: Here आप (कोणीय 2 डॉक्स से) कुछ जानकारी क्यों फिल्टर करने के लिए डेटा है पाइप का उपयोग कर के बारे में पा सकते हैं बहुत अच्छा दृष्टिकोण नहीं है, और यही कारण है कि मैं सेवा में ऐसा करने की सलाह देता हूं, इसे शेष को शेष एप्लिकेशन में रखते हुए (आखिरकार, प्रत्येक श्रेणी पृष्ठ केवल उस डेटा को प्राप्त करना चाहता है जिसे इसे दिखाने की ज़रूरत है, इसे चाहिए सभी उत्पादों से निपटने के लिए केवल तभी ढूंढें जिन्हें इसे देखने में प्रदर्शित करने की आवश्यकता है)।

Answer 2

मैं भी एक सेवा बनाना चाहिए ProductCategoryService

ionic g provider ProductCategory 

कहा जाता है और एक तरीका है जिसके मैं पैरामीटर के रूप में साथ श्रेणी के नाम पर अमल कर सकता है

getProductsByCategoryName(categoryName): any{ 
    return this.allProducts.filter(product => product.categoryName === categoryName); 
} 

बदले में मैं के साथ एक फ़िल्टर किया सरणी मिलेगा बनाने मेरे उत्पादों, अपने टेम्पलेट को बांधें और आप कर चुके हैं।