Question

在Angular2中，我有一个ngFor，想要订购1个字段，但没有构建自定义管道。

我可以使用任何内置的吗？

这是我的代码：

<tr *ngFor="let item of listOfMessages" [ngClass]="{unread: item.hasUnreadMessages}">

我想按item.hasUnreadMessages订购。

但我想要最简单的方法来做到这一点。

我正在使用带有angular2和typescript

的html5

我的尝试：

  this.listOfMessages = this.listOfMessages.sort((item1:any, item2:any): boolean => this.compareByBool(item1, item2, "hasUnreadMessages"));


  compareByBool = (item1: any, item2: any, fieldName: any): any =>{
      return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1));
  }

如果这是真的：hasUnreadMessages然后item应该在数组顶部

Answer 1

您可以实现自己的排序，然后执行

this.sortedItem = this.items.sort((item1, item2): number => compareByNumber(item1, item2, fieldName));

或

this.sortedItems = this.items.sort((item1, item2): number => compareByString(item1, item2, fieldName));

取决于您的字段类型

function compareByNumber(item1, item2, fieldName){
  return item1[fieldName] - item2[fieldName];
}
function compareByString(item1, item2, fieldName){
  return (item1[fieldName] < item2[fieldName] ? -1 : (item1[fieldName] === item2[fieldName] ? 0 : 1));
}

function compareByBool(item1, item2, fieldName){
  return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1));
}

Answer 2

不，你不能使用管道，因为这是Angular团队的决定。有太多的表现问题，每个人都指责Angular，这只是部分正确。所以他们选择不包含它，不建议使用自定义管道。

有关官方文档here的更多信息。它还解释了你可以做什么。基本上编写自己的排序方法，如orderedListOfMessages()，并在组件内的typescript / javascript中进行。

但请记住它会经常发生，所以如果您知道基础数据没有改变，您可以改为添加新变量orderedListOfMessages并在数据更新后立即更新。

所以第一种方法很简单，但应谨慎使用（只是非常简单快速，可能是5-20种元素）。

第二种方法并不太复杂，但需要更多努力。你可以确定它不会在鼠标移动时超载页面。

这个非常简单的代码段似乎可以在js中用于布尔比较：

boolArray.sort(function(item1, item2){ return item1 ? 0 : 1});

在Angular2中，我有一个ngFor，想要命令1个字段

2 个答案: