Como fazer um tubo de classificação no angular2 com uma matriz de objetosProblema original:

Eu tenho uma lista de TODOs (Todo []) e quero classificá-la sempre que fizer algumas alterações. Quero que todo o trabalho concluído seja exibido na parte inferior da lista. O objeto Todo possui uma propriedade chamada .completed que armazena um valor booleano, informando se o todo foi concluído ou não.

Criando o Pipe:

No Angular2, o pipe "OrderBy" não existe. Então temos que construí-lo:

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

Se você não entendeu o método de classificação, verifique o MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

O Pipe está pronto, vamos para o Componente.

Criando o componente:

A classe AppComponent cria uma matriz de Todo, chamada Todos, obtendo os objetos de uma simulação com um serviço.

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

Implementação do modelo

Este é o chamado do canal:

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

Demo:

Para o exemplo completo com todo o código:https://plnkr.co/edit/VICRMVNhqdqK9V4rJZYm?p=preview Assista no github:https://github.com/AndreaMiotto/Angular2-TodoApp

Pipe Unpure

Os tubos só mudam por padrão quando os parâmetros de entrada do tubo são alterados e não quando os dados são alterados. Definindo Pure como false, você o tornará "impuro" para que você atualize sempre.