您如何使用 Angular 2 对带有管道的价格类别进行排序？答案

【问题标题】：How do you sort price category with pipes using Angular 2?您如何使用 Angular 2 对带有管道的价格类别进行排序？
【发布时间】：2017-01-05 09:07:52
【问题描述】：

下面是我对价格类别进行排序的 HTML 文件，但我的管道没有很管用。我的产品模型中的两个对象是 priceCategory: string、Price: Number --> 以及更多：颜色、品牌、类型、内存等...

(3)Items: (1.) Price: $225, priceCategory = '$200-300', (2.) 价格：75 美元，价格类别 = '50-100 美元'， (3.) 价格：$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)

它按字母顺序排序，但不按字符串长度排序。我正在使用的管道适用于品牌类别（Apple、Google、Samsung）、颜色（黑色、绿色、白色） - 使用相同的 HTML 代码，通过替换 PriceCategory - BrandCategory、ColorCategory 等。我从Stack Overflow，因为我对管道不太了解。

【问题讨论】：

在您至少以最低限度的示例方式生成整个组件之前，我们无法合理地回答这个问题。
冒泡排序适用于价格（ASC，DESC），标题（ASC，DESC）和品牌（ASC，DESC）。
我的应用程序就是任何其他购物车。它对类别进行排序：50-100 美元排在 1000-1100 美元之前。这只是简单的字符串排序。注意：产品组件对价格类别和搜索产品进行排序。这是我目前在学习 Angular 2 管道时为我的应用程序提供的解决方案。

标签： angular

【解决方案1】：

如何使用冒泡排序对价格类别进行排序？

我创建了一个类：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;
    }
}

为了更好地了解我的应用：过滤器结果显示在左侧，而产品搜索/发现占据了中心的大部分空间。产品各不相同：玩具、视频游戏、鞋子等。

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[];

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之前。这就是我使用冒泡排序的原因。如果我无论如何都可以帮助你，请为我的申请投票支持我的“自己的答案”。

【讨论】：