Сортировочная труба Angular2 с массивом объектов
У меня есть список TODO (Todo []), и я хочу сортировать его каждый раз, когда я делаю некоторые изменения. Я хочу, чтобы завершенные задачи отображались внизу списка. У объекта Todo есть свойство с именем .completed, в котором хранится логическое значение. Он сообщит нам, завершено ли задание или нет.
Создание трубы:В Angular2 канал "OrderBy" не существует. Итак, мы должны построить это:
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;
}
}
Если вы не поняли метод сортировки, проверьте MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Труба готова, давайте перейдем к Компоненту.
Создание компонента:Класс AppComponent создает массив Todo с именем Todos, получая объекты из макета с помощью сервиса.
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();
}
}
Реализация шаблонаЭто труба, вызывающая:
<li *ngFor="#todo of todos | sort; #i=index">
(...)
</li>
Демо-версия:Для полного примера со всем кодом:https://plnkr.co/edit/VICRMVNhqdqK9V4rJZYm?p=preview Смотрите это на github:https://github.com/AndreaMiotto/Angular2-TodoApp
Труба не чистаяТрубы изменяются по умолчанию только тогда, когда изменяются входные параметры трубы, а не при изменении данных. Если для Pure задано значение false, вы сделаете его «нечистым», чтобы ваш канал всегда обновлялся.