Angular 4 Sortierung mit orderby Rohr funktioniert nicht

Question

Ich arbeite an Sortierspalte. aber wenn ich Sortiervariable von der Komponente überlasse, funktioniert es nicht. Arbeits Szenario:

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

Aber wenn ich versuche Art Variable auf die gleiche Weise in folgendem Code von der Komponente zu setzen es nicht funktioniert. Komponentendatei Funktion:

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

HTML-Datei:

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

finden Sie unter Link als Referenz:

http://embed.plnkr.co/DHLVc0

Answer 1

Ich erinnere mich, dieses Rohr Beispiel verwendet, und musste sich ändern Es ist wegen einiger Fehler, die ich bekam.

Hier ist, wie es jetzt aussieht:

/* 
* 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

Ich bin nicht sicher, Argumente zu ändern Pfeifen fordert eine Neubewertung des Rohres Ergebnis.

Haben Sie stattdessen versucht, eine Funktion in Ihrer Komponente zu verwenden? Sie könnten das Array von Werten als eine Eigenschaft Ihrer Komponente und Methoden innerhalb der Komponente haben, die das Array nach Ihren Kriterien sortieren.

@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. 
    } 
}