1

I have tried to make a custom orderBy pipe in angular 2 (ionic app) and for some reason, it's making the chrome inspector (maybe even the entire app) refresh constantly.

<ion-card class="event" *ngFor="let position of positions | OrderBy : 'event.startDateTime'">
    ...
</ion-card>

The event.startDateTime is format as such: "2017-05-26 00:00".

I followed this answer: Angular 2 OrderBy Pipe to make this pipe. The only thing I've changed is using moment.js to turn a dateTime stamp into a unix timestamp

static _orderByComparator(a: any, b: any): number {
    a = moment(a).unix();
    b = moment(b).unix();

So, I'm not sure why it's doing this to chrome, and I'm wondering if anyone else has experienced this?

full code below import { Pipe, PipeTransform } from "@angular/core"; import * as moment from 'moment'; //Angular 2 OrderBy Pipe

@Pipe({
  name: "OrderBy",
  pure: false
})

export class OrderBy implements PipeTransform {

  value: string[] = [];

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

    a = moment(a).unix();
    b = moment(b).unix();

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

    if (
  (isNaN(parseFloat(a)) ||
  !isFinite(a)) ||
  (isNaN(parseFloat(b)) || !isFinite(b))
) {
  // Isn"t a number so lowercase the string to properly compare
  a = a.toString();
  b = b.toString();
  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

}

public transform(input: any, config = "+"): any { if (!input) { return input; }

// 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.substr(0, 1) === "-";

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

    return value.sort(function(a: any, b: any) {
      let aValue = a[property];
      let bValue = b[property];

      let propertySplit = property.split(".");

      if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
        aValue = a;
        bValue = b;
        for (let j = 0; j < propertySplit.length; j++) {
          aValue = aValue[propertySplit[j]];
          bValue = bValue[propertySplit[j]];
        }
      }

      return !desc
        ? OrderBy._orderByComparator(aValue, bValue)
        : -OrderBy._orderByComparator(aValue, bValue);
    });
  }
} else {
  // Loop over property of the array in order and sort
  return value.sort(function(a: any, b: any) {
    for (let i = 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 aValue = a[property];
      let bValue = b[property];

      let propertySplit = property.split(".");

      if (typeof aValue === "undefined" && typeof bValue === "undefined" && propertySplit.length > 1) {
        aValue = a;
        bValue = b;
        for (let j = 0; j < propertySplit.length; j++) {
          aValue = aValue[propertySplit[j]];
          bValue = bValue[propertySplit[j]];
        }
      }

      let comparison = !desc
        ? OrderBy._orderByComparator(aValue, bValue)
        : -OrderBy._orderByComparator(aValue, bValue);

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

    return 0; // equal each other
  });
    }
  }
}
Community
  • 1
  • 1
ntgCleaner
  • 5,865
  • 9
  • 48
  • 86

0 Answers0