angular2實現管根據選擇的屬性數組對象進行排序

我有一系列的產品：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>

我如何能實現在這種情況下的管道？

來源

2017-10-04 Nitish

你如何確定的順序，你的例子不是'4，1，3，2'而非'4，1，2，3'？（因爲「2」和「3」的property_1值都是「0」） – amal

在這種情況下，只需通過產品索引 – Nitish

升序或降序索引（因爲您在尋找降序）？我想這沒關係 – amal

您可以將數組&排序屬性傳遞給管道。管道可以通過該屬性對數組進行排序。

// 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]); 
    } 
}

這是一個基本的工作plnkr https://plnkr.co/edit/XgzkljALx2cEHWLSGOTs?p=preview

來源

2017-10-04 14:22:38 LLai

這正是我所期待的，非常感謝！ – Nitish

angular2實現管根據選擇的屬性數組對象進行排序

回答

相關問題