angular2实现一个管道，根据选定的特性对阵列对象进行排序

我有一系列产品：

public sort_criteria: any='';

public products: any = [
{title: 'Product_1', desc: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', img: '../assets/prod_1.jpg', property_1: 50, property_2: 6, property_3: 0, property_4: 76, property_5: 54, property_6: 87, property_7: 0},
{title: 'Product_2', desc: 'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s', img: '../assets/prod_2.jpg', property_1: 0, property_2: 0, property_3: 65, property_4: 0, property_5: 0, property_6: 7, property_7: 88},
{title: 'Product_3', desc: 'It has survived not only five centuries but also the leap into electronic typesetting', img: '../assets/prod_3.jpg', property_1: 0, property_2: 97, property_3: 0, property_4: 56, property_5: 0, property_6: 0, property_7: 86},
{title: 'Product_4', desc: ' It was popularised in the 1960s with the release of Letraset sheets containing,', img: '../assets/prod_4.jpg', property_1: 90, property_2: 25, property_3: 56, property_4: 64, property_5: 0, property_6: 98, property_7: 0},
]

public sort_according_to: any=['Product 1', 'Product 2', 'Product 3', 'Product 4']

setSortCriteria(criteria){

    switch (criteria) {
        case "Product 1":
        alert(3)
        break;
        case "Product 2":
        alert(2)
        break;
        case "Product 3":
        alert(3)
        break;
        case "Product 4":
        alert(4)
        break;      
        default:
        break;
    }
}

我的用户将从7个属性中选择一个属性，他选择我的产品的任何属性都应按该属性的降序排序，即，如果他选择属性1，则我的产品序列将为4,1,2,3

我的HTML：

  <h5>Sort products according to the popularity of</h5>

  <div *ngFor="let product of sort_according_to">
    <mdl-radio name="productgroup" [value]='product' [(ngModel)]="sort_criteria" (change)="setSortCriteria(product)"> {{product}} </mdl-radio>
  </div>


  <mdl-card *ngFor="let product of products" class="demo-card-square" mdl-shadow="2">
    <figure class="mdl-card__media">
      <img src="{{product.img}}" alt="" />
    </figure>
    <mdl-card-title mdl-card-expand>
      <h2 mdl-card-title-text>{{product.title}}</h2><br>
    </mdl-card-title>

    <mdl-card-supporting-text>
      {{product.desc}}
    </mdl-card-supporting-text>
    <mdl-card-actions mdl-card-border>
      <button mdl-button mdl-colored mdl-ripple (click)="openProductDetails()">
        view
      </button>
      <div class="mdl-layout-spacer"></div>
      <button class="mdl-button mdl-button--icon mdl-button--colored" (click)="addToCart(product)"><i class="material-icons">shopping_cart</i></button>
    </mdl-card-actions>
  </mdl-card>

根据产品的流行程度对产品进行分类
{{product}}
{{product.title}}

{{product.desc}}
看法
购物车

---

在这种情况下，如何实现管道？

可以将数组和排序属性传递到管道中。然后，管道可以根据该属性对数组进行排序

// component.html
<mdl-card *ngFor="let product of products | sortArrayByProperty : sort_criteria">
</mdl-card>

//pipe.ts
@Pipe({
    name: 'sortArrayByProperty'
})
export class SortArrayByPropertyPipe implements PipeTransform {
    transform(arr: any[]: property: string): any[] {
        // basic sort by property method
        return arr.sort((a, b) => b[property] - a[property]);
    }
}

//component.html
//烟斗
@烟斗({
名称：“SortaryByProperty”
})
导出类SortArrayByPropertyType实现PipeTransform{
转换（arr:any[]：属性：string）：any[]{
//基本属性排序方法
返回arr.sort（（a，b）=>b[property]-a[property]）；
}
}

---

这是一个基本的工作plnkr，您可以将数组和排序属性传递到管道中。然后，管道可以根据该属性对数组进行排序

// component.html
<mdl-card *ngFor="let product of products | sortArrayByProperty : sort_criteria">
</mdl-card>

//pipe.ts
@Pipe({
    name: 'sortArrayByProperty'
})
export class SortArrayByPropertyPipe implements PipeTransform {
    transform(arr: any[]: property: string): any[] {
        // basic sort by property method
        return arr.sort((a, b) => b[property] - a[property]);
    }
}

//component.html
//烟斗
@烟斗({
名称：“SortaryByProperty”
})
导出类SortArrayByPropertyType实现PipeTransform{
转换（arr:any[]：属性：string）：any[]{
//基本属性排序方法
返回arr.sort（（a，b）=>b[property]-a[property]）；
}
}

---

这是一个基本的工作plnkr

如何确定示例中的顺序不是

4,1,3,2

而不是

4,1,2,3

？（因为2和3的

属性_1

值都是“

0

”），在这种情况下，仅通过产品的索引升序或降序索引（因为您正在寻找降序）？我想这没关系。这没关系。你如何确定你的例子中的顺序不是

4,1,3,2

，而是

4,1,2,3

？（因为2和3的

属性_1

值都是“

0

”），在这种情况下，仅通过产品的索引升序或降序索引（因为您正在寻找降序）？我想没关系。没关系。事实上，这就是我要找的，非常感谢！这正是我想要的，非常感谢！