什么是重新排序 UI 列表的快速方法？

Question

我正在使用 Angular 2 和 Typescript。

在我的项目中，我展示了一个简单的 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>

非常简单的列表。

现在我想要某种方法来重新排序此列表并将列表数组设置为新顺序。

我正在寻找一种方法，用户可以根据需要对列表进行重新排序，例如按优先级更改列表。

有人可以帮我找到一种可以快速实施并且效果很好的方法吗？

（我查看了一些拖放库，但我使用的是 Angular 2（2.0.0-beta.15）的特定版本，它们都不支持。）

感谢分配！

Answer 1

为此，您必须使用 angular 2 管道以获取更多信息，请查看this

按管道订购

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>