Question

我正在研究排序列。但是当我从组件传递sort变量时，它无法正常工作。工作场景：

<th>Contact</th>
<ng-container *ngFor="let item of (itemsToShow | orderBy:['-age', 'firstName'])">
</ng-container>

但是当我尝试在下面的代码中以相同的方式从组件设置排序变量时，它不起作用。组件文件功能：

changeOrderBy() {
 this.orderset = '['-age', 'firstName']';
}

HTML文件：

<th (click)="changeOrderBy()">Contact</th>
<ng-container *ngFor="let item of (itemsToShow | orderBy:orderset )">
</ng-container>

请参阅以下链接以供参考：

http://embed.plnkr.co/DHLVc0

Answer 1

我记得我使用过这个管道示例，因为我遇到了一些错误而不得不改变它。

以下是现在的样子：

/*
 * Example use
 *      Basic Array of single type: *ngFor="let todo of todoService.todos | orderBy : '-'"
 *      Multidimensional Array Sort on single column: *ngFor="let todo of todoService.todos | orderBy : ['-status']"
 *      Multidimensional Array Sort on multiple columns: *ngFor="let todo of todoService.todos | orderBy : ['status', '-title']"
 */

import { Pipe, PipeTransform } from '@angular/core';

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

    value: string[] = [];

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

        if (a === null || typeof a === 'undefined') { a = 0; };
        if (b === null || typeof b === 'undefined') { b = 0; };

        if (typeof a === 'string') { a = a.toLowerCase(); }
        if (typeof b === 'string') { b = b.toLowerCase(); }

        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: string = '+'): any {

        // make a copy of the input's reference
        this.value = [...input];
        let value = this.value;

        if (!Array.isArray(value)) { return value; }

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

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

                return value.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 value.sort(function (a: any, b: any) {
                for (let i: number = 0; i < config.length; i++) {
                    let desc = config[i].substr(0, 1) === '-';
                    let property = config[i].substr(0, 1) === '+' || config[i].substr(0, 1) === '-'
                        ? config[i].substr(1)
                        : config[i];

                    let 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
            });
        }
    }
}

Answer 2

我不确定更改管道的参数需要重新评估所述管道的结果。

您是否尝试在组件内部使用某个功能？您可以将值数组作为组件的属性，并在组件内部根据您的条件对数组进行排序。

@Component( ... )
export class YourComponent {
  itemsToShow: Contact[];

  changeOrderBy() {
    SortUtils.sortArrayBy(this.itemsToShow, ['-age', 'firstName']);
  }
}

export class SortUtils {
  static sortArrayBy(array: any[], args: string[]) {
    // Your sort logic here...
    // You may copy/paste the code from the library
    // But I recommend rewrite the logic entirely instead.
  }
}

使用orderby管道无效的Angular 4排序

2 个答案: