什麼可能是一個快速和快速的方式重新排列UI列表？

Question

Im使用Angular 2 & Typescript。

在我的項目IM呈現JSON對象的簡單列表中，HTML看起來像這樣：

<div> 
    <!-- Present List Button --> 
    <button md-button 
      (click)="showList()" 
      class="md-primary" 
      title="show list">Cropping</button> 
</div> 


<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

非常簡單的列表。

現在我想要某種方法來重新排列此列表並將列表數組設置爲新順序。

我正在尋找一種方法，用戶cal然後重新排序列表，但他想要的，就像按優先級更改列表。

請問有人能幫我找到一種方法，可以快速實施並且工作良好嗎？

（我看着有些拖拉庫，但我有角2（2.0.0-beta.15），這其中不支持的特定版本的工作）

感謝配發！

Answer 1

爲此，你必須使用角2管的更多信息，請this

ORDERBY管

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ 
    name: "orderBy", 
    pure: false, 
}) 

export class OrderBy implements PipeTransform { 
    transform(array: any, args: any) { 
    if (array != null) { 
     if (array) { 
     let orderByValue = args; 
     let byVal = 1 
     if (orderByValue.charAt(0) == "!") { 
      byVal = -1 
      orderByValue = orderByValue.substring(1) 
     } 


     array.sort((a: any, b: any) => { 
      if (a[orderByValue].toString().toLowerCase() < b[orderByValue].toString().toLowerCase()) { 
      return -1 * byVal; 
      } else if (a[orderByValue].toString().toLowerCase() > b[orderByValue].toString().toLowerCase()) { 
      return 1 * byVal; 
      } else { 
      return 0; 
      } 
     }); 
     return array; 
     } 
    } 
    } 
} 

組件

import {Filter} from '../pipes/filter'; 
import {OrderBy} from '../pipes/orderBy'; 

@Component({ 
    selector: 'category', 
    templateUrl: '../views/category.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [SetupService, HTTP_PROVIDERS], 
    pipes: [ OrderBy] 
}) 

查看按升序排列

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content> 

查看降序排序

<md-content> 
    <div *ngIf="showList"> 
    <div class="list-bg" *ngFor="#list of lists | async | orderBy:'!id'"> 
    ID: {{list.id}} <p></p> Number of Items: {{list.numberOfItems}} 
    </div> 
    </div> 
</md-content>