Question

下面是我的HTML文件来排序价格类别，但我的管道没有很好的工作。我的产品模型中的两个对象是priceCategory：string，Price：Number - ＆gt;以及更多：颜色，品牌，类型，记忆等......

（3）项目：（1。）价格：225美元，priceCategory =＆＃39; $ 200-300＆＃39;，（2.）价格：75美元，priceCategory =＆＃39; $ 50-100＆＃39;，（3.）价格：1000美元，priceCategory =＆＃39; $ 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因为我对管道知之甚少。

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

如何使用Angular 2对管道进行价格分类？

1 个答案:

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