Question

我有一个页面，其中包含一个来自JSON文件的列表。我想添加一个排序按钮功能。以下是我的.ts，.html代码以及数组console.log的图片。

home.ts代码：

  this._servall.myservice(this.taskdesc).subscribe(data => {
    console.log(data);
    this.displaylist = data;

home.html代码：

<ion-list no-lines *ngFor="let list of displaylist;let i=index;" >
<ion-item>
<p>{{list.TASKDESC}}</p>
<p>{{list.PRIMARY}}</p> 
<p>{{list.DEADLINE_DT}}</p>
</ion-item>
</ion-list>

我想用list.PRIMARY //对列表进行排序//这是一个名称

我希望按递增顺序对列表list.DEADLINE_DT //进行排序，这是日期

以下是console.log数组

的this.displaylist图片

Answer 1

创建一个pipe进行排序

<强> orderbypipe.ts

/*
 * Example use
 *        Basic Array of single type: *ngFor="#todo of todoService.todos | orderBy : '-'"
 *        Multidimensional Array Sort on single column: *ngFor="#todo of todoService.todos | orderBy : ['-status']"
 *        Multidimensional Array Sort on multiple columns: *ngFor="#todo of todoService.todos | orderBy : ['status', '-title']"
 */
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'order', pure: false })
export class OrderBy implements PipeTransform {

    static _orderByComparator(a: any, b: any): number {

        if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
            //Isn't a number so lowercase the string to properly compare
            if (a.toLowerCase() < b.toLowerCase()) return -1;
            if (a.toLowerCase() > b.toLowerCase()) return 1;
        }
        else {
            //Parse strings as numbers to compare properly
            if (parseFloat(a) < parseFloat(b)) return -1;
            if (parseFloat(a) > parseFloat(b)) return 1;
        }

        return 0; //equal each other
    }

    transform(input: any, [config = '+']): any {

        if (!Array.isArray(input)) return input;

        if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1)) {
            var propertyToCheck: string = !Array.isArray(config) ? config : config[0];
            var desc = propertyToCheck.substr(0, 1) == '-';

            //Basic array
            if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
                return !desc ? input.sort() : input.sort().reverse();
            }
            else {
                var property: string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-'
                    ? propertyToCheck.substr(1)
                    : propertyToCheck;

                return input.sort(function(a: any, b: any) {
                    return !desc
                        ? OrderBy._orderByComparator(a[property], b[property])
                        : -OrderBy._orderByComparator(a[property], b[property]);
                });
            }
        }
        else {
            //Loop over property of the array in order and sort
            return input.sort(function(a: any, b: any) {
                for (var i: number = 0; i < config.length; i++) {
                    var desc = config[i].substr(0, 1) == '-';
                    var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-'
                        ? config[i].substr(1)
                        : config[i];

                    var comparison = !desc
                        ? OrderBy._orderByComparator(a[property], b[property])
                        : -OrderBy._orderByComparator(a[property], b[property]);

                    //Don't return 0 yet in case of needing to sort by next property
                    if (comparison != 0) return comparison;
                }

                return 0; //equal each other
            });
        }
    }
}

<强> HTML

<ion-list no-lines *ngFor="let list of displaylist | order : ['+PRIMARY'];let i=index;" >

有关详细信息，请参阅此http://www.fueltravel.com/blog/migrating-from-angular-1-to-2-part-1-pipes/

如何在Ionic 2中排序/排序数组？

1 个答案: