如何使用Angular 2对管道的价格类别进行排序? [英] How do you sort price category with pipes using Angular 2?

问题描述

下面是我的HTML文件，用于对价格类别进行排序，但我的Pipe却​​没有 很好的工作.我的产品模型中的两个对象是priceCategory:字符串，Price:Number->以及更多:颜色，品牌，类型，内存等...

Below is my HTML file to sort price category but my Pipe does not quite work. Two objects in my products model are priceCategory: string, Price: Number --> and more: color, brand, type, memory, etc...

(3)项目:(1.)价格:$ 225，priceCategory ='$ 200-300'， (2.)价格:$ 75，priceCategory ='$ 50-100'， (3.)价格:$ 1000，priceCategory ='$ 1000-1100

(3)Items: (1.) Price: $225, priceCategory = '$200-300', (2.) Price: $75, priceCategory = '$50-100', (3.) Price: $1000, priceCategory = '$1000-1100

<div [ngClass]="displayPriceCategory"> 
  <ul *ngFor="let priceCategory of priceCategories | orderby: ['fieldName']; let i = index">
   <div class="checkbox">
    <input type="checkbox" value={{priceCategory.selected}} 
    [ngModel]="priceCategory.selected" (change)="onPriceCategory($event, i)">
    {{ priceCategory.fieldName}}({{priceCategory.getCount()}})
   </div>
 </div>

结果是:

 $1000-111 (1)
 $200-300 (1)
 $50-100 (1)

它按字母顺序排序，但不按字符串长度排序.我使用的管道适用于品牌类别(苹果，谷歌，三星)，颜色(黑色，绿色，白色)-使用相同的HTML代码，替换了PriceCategory-BrandCategory，ColorCategory等.我从堆栈溢出，因为我不太了解管道.

It sorts it alphabetically but not in terms of string length. The pipe I am using works with the Brand Category(Apple, Google, Samsung), Color(black, green, white) - using the same code for HTML, by replacing PriceCategory - BrandCategory, ColorCategory, etc. I copied the Pipe Code from Stack Overflow since I don't know so much about pipes.

推荐答案

我如何使用气泡排序对价格类别进行排序?

我创建了一个类:SearchField

How am I using bubble sort to sort price category in order?

I created a class: SearchField

export class SearchField {
    fieldName: string;  //Apple, Samsung, Memory, color, et..
    products: Product[];  //the products in the field; 
    selected: boolean;    //if this field is selected, shows the products in the product list.
    constructor(fieldName: string) {
        this.fieldName = fieldName;
        this.products = [];
        this.selected = false;
    }
    addProduct(product: Product) {
        this.products.push(product);
    }
    getProducts() {
        return this.products;
    }
    // $0-100 (3) : tells shopper there are 3 products that belong to $0-100. If this field is selected, 3 items appear in product list. 
    getCount() {
        return this.products.length;
    }
}

为了更好地了解我的应用程序:过滤器"结果显示在左侧，而搜索/找到"产品占据了中心位置的大部分空间.产品各不相同:玩具，视频游戏，鞋子等.

To get a better understanding of my app: The Filter results are displayed on the left while product search/found takes most of the space on the center. Products varies: toys, video-games, shoes, etc..

FILTER RESULTS              Iphone, $700, white, AT&T, 2GB, etc.
Title: Asc, Desc            Pixel, $700, white, Verizon, 2GB, etc..
Price: Asc, Desc            Iphone SE, $550, black, AT&T, 1GB, etc..
Price
  $500-600(1)
  $700-800(2)
Brand
  Apple(2)
  Google(1) 

在实现冒泡排序之前，我将所有搜索项存储在服务中的数组中.对于价格类别:priceCategories:SearchField [];

Before I implemented bubble sort, I stored all the search items in an array in my service. For price category: priceCategories: SearchField[];

getPriceCategoryQueries() {
    for(let i=0; i<priceCategories.length; i++){
        var searchProduct = this.searchProducts[i];
        if(count == 0) {
            let aPriceCategory = new SearchField(searchProduct.priceCategory);
            aPriceCategory.addProduct(searchProduct);
            this.priceCategories.push(aPriceCategory);
            count = 1;
        }else addProductToPriceCategory(searchProduct);
     } this.sortPriceCategory();
}
//Here is the bubble sort to to sort priceCategory in order
//All I am doing is comparing the 1st item in that category to the next.
sortPriceCategory(){
    var temp: any;
    let swapped = true;
    let j = 0;
    for(let i=0; i<this.priceCategories.length; i++){
        if(this.priceCategories[i].product(0).price > this.priceCategories[i+1].products[0].price) {
            temp = priceCategories[i];
            this.priceCategories[i] = this.priceCategories[i+1];
            this.priceCategories[i+1] = temp;
            swapped = true;
         }
     }
}        

结论:管道很棒.它们具有与brandCategory，Color等相同的代码，但是我使用的管道不适用于priceCategory和sizeCategory:2-5号位于10-15号之前. 这就是为什么我使用冒泡排序的原因.如果我有任何帮助，请为我的"OWN ANSWER"投票供我的应用程序.

Conclusion: Pipes are great. They have the same code for brandCategory, Color, etc, but the pipe I am using does not work for priceCategory, and sizeCategory: size 2-5 comes before size 10 - 15. That is the reason why I am using bubble sort. If I help you in anyway, please vote for my "OWN ANSWER" for my application.

这篇关于如何使用Angular 2对管道的价格类别进行排序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！