javascript - 如何使用 Angular 以自定义排序顺序显示列表？

Question

我正在尝试以自定义顺序 [m,r,d,v,o] 在屏幕上显示对象列表。我尝试过使用 sort() 函数，该函数适用于第一个和最后一个项目，但中间的项目是随机出现的。

在这种情况下我应该使用 sort() 函数吗？如果是这样我做错了什么？

在 UI 中，我使用 *ngFor 来循环数组。

<div *ngFor="let stuff of sortedStuff; let i = index;">
    <div>want to display in the custom sort order here</div>
    <ul><li> {{ stuff.someproperty }} <li></ul>
</div>

构建数组的代码:

var sortedStuff = stuff.splice(0);
sortedStuff.sort((obj1) => {
    if (obj1.propertyX === 'M') {
        return -1;
    }

    if (obj1.propertyX!= 'M' && obj1.propertyX!= 'D' && obj1.productType != 'V' && obj1.propertyX!= 'O' && obj1.propertyX=== 'R'){
        return 1;
    }

    if (obj1.propertyX!= 'M' && obj1.propertyX!= 'R' && obj1.propertyX!= 'V' && obj1.propertyX!= 'O' && obj1.propertyX === 'D'){
        return 1;
    }

    if (obj1.propertyX!= 'M' && obj1.propertyX!= 'D' && obj1.propertyX!= 'R' && obj1.propertyX!= 'O' && obj1.propertyX === 'V'){
        return 1;
    } 

    if (obj1.obj1.propertyX != 'M' && obj1.obj1.propertyX != 'D' && obj1.obj1.propertyX != 'V' && obj1.obj1.propertyX != 'R' && obj1.obj1.propertyX === 'O'){
        return 1;
    }
    return 0;
});

Answer 1

这里 Angular 没有任何问题，您正在使用内置的 Array#sort功能错误。

您在 sort 中传递的 lambda 是一个“比较函数”，具有以下属性(来自链接的 MDN):

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then:

• If compareFunction(a, b) is less than 0, sort a to an index lower than b, i.e. a comes first.
• If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.
• If compareFunction(a, b) is greater than 0, sort b to a lower index than a. compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined.

代码中的函数仅适用于一个参数，这意味着无法正确比较数组中的两项。

<小时/>

如果这不是您喜欢的方法，我可以推荐使用 sortBy from loash 。它接受一个从对象“抓取”一些数据的函数。抓取的数据按原样进行标准比较。