使用过滤器或管道将产品类别加载到Ionic 2中的页面中？

Question

我希望创建一个6页的Ionic 2应用程序,我不确定是否为各个类别页面使用管道或过滤器以及我需要执行此操作的代码.

每个类别页面都可以加载"applecat"类别定义的相关产品.以下是API,通过Google表格以电子表格格式显示产品以及非常快速的主页样机构思:

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

概述

6页

• home - 无需加载产品 - 只需链接到页面
• allproducts -loads所有产品
• ipad - 在applecat类别下加载列为ipad的所有项目
• iphone - 在applecat类别下加载列为iphone的所有项目
• 键盘 - 在applecat类别下加载列为iphone的所有项目
• 笔记本电脑 - 在applecat类别下加载列为iphone的所有项目

情景(潜在的用户流程)

用户打开应用程序,点击Home然后Ipad类别链接(加载所有Ipad产品)然后回到Home决定点击All(加载所有产品),后面点击另一页....

问题

它会将2个阵列加载到内存/控制台吗？类别页面是否应使用过滤器或管道？代码应如何查找与现有API调用和产品列表数组相关的管道/过滤器？

PROVIDERS

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中的基本工作示例(API调用Provider和list ts代码如上).

可以通过https://github.com/jones98/4cat查看和分发Github repo

可以在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 分钟一次）。

可能存在语法错误或拼写错误（我直接在 SO 答案中编码），但这应该让您了解如何处理给定的场景。如果出现问题，请告诉我，以便我可以帮助您修复...

更新：在这里您可以找到一些信息（来自 Angular 2 文档），了解为什么使用管道来过滤数据不是一个很好的方法，这就是为什么我建议在服务中这样做，并将其对应用程序的其余部分隐藏（毕竟，每个类别页面只是想获取它需要显示的数据，它不应该处理所有产品，然后只找到它需要在视图中显示的产品）。