Cómo hacer una tubería de clasificación en angular2 con una matriz de objetosProblema original

Tengo una lista de TODOs (Todo []) y quiero ordenarla cada vez que hago algunos cambios. Quiero que todo lo completado se muestre al final de la lista. El objeto Todo tiene una propiedad llamada .completed que almacena un valor booleano, nos dirá si el todo está completo o no.

Creando la tubería:

En Angular2, la tubería "OrderBy" no existe. Entonces tenemos que construirlo:

import { Pipe, PipeTransform } from "angular2/core";
//Todo is the interface for our todo object
import {Todo} from './todo';

@Pipe({
  name: "sort",
  //set to false so it will always update, read below the code.
  pure: false
})
export class TodosSortPipe implements PipeTransform {
  transform(array: Todo[], args: any): Todo[] {
    //watch the console to see how many times you pipe is called
    console.log("calling pipe");
    /* javascript is async, so could be that the pipe is called before
    that the todos list is created, in this case we do nothing
    returning the array as it is */
    if (isBlank(array)) return null;
    array.sort((a, b) => {
      if (a.completed < b.completed) {
        return -1;
      //.completed because we want to sort the list by completed property
      } else if (a.completed > b.completed) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Si no entendió el método de clasificación, consulte MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

La tubería está lista, pasemos al componente.

Crear el componente:

La clase AppComponent crea una matriz de Todo, llamada Todos, que obtiene los objetos de un simulacro con un servicio.

import {Component, OnInit} from 'angular2/core';
import {Todo} from './todo';
import {TodoService} from './todo.service';
import {TodosSortPipe} from './sort-pipe.component'

@Component({
    //name of the html element
    selector: 'my-app',
    //view of the selector,  " ` " is alt + 9
    templateUrl: "./app/todo-list.component.html",
    providers: [TodoService],
    pipes: [ TodosSortPipe ]
})

export class AppComponent implements OnInit{

    public todos: Todo[];
    public edited = false;
    public changes = 0;
    //creating an istance of todoService
    constructor(private _todoService: TodoService) { };

    //getting the todos list from the service
    getTodos() {
        this._todoService.getTodos().then(todos => this.todos = todos);
    }

   (...)
   editTodo(todo: Todo): void {
        //slice is very important, read below the code
        this.todos = this.todos.slice();
        this.saveTodos();
    }
}

Implementación de plantilla

Esta es la llamada de la tubería:

<li *ngFor="#todo of todos | sort; #i=index">
 (...)
</li>

Manifestación:

Para el ejemplo completo con todo el código:https://plnkr.co/edit/VICRMVNhqdqK9V4rJZYm?p=preview Míralo en github:https://github.com/AndreaMiotto/Angular2-TodoApp

Tubo no puro

Las tuberías solo cambian de forma predeterminada cuando cambian los parámetros de entrada de su tubería y no cuando cambian sus datos. Si establece Pure en false, lo hará "impuro" para que la tubería siempre se actualice.