Не мога да преведа този код от Angualr 1 към Angular 2:
ng-repeat="todo in todos | orderBy: 'completed'"
Това е, което направих след отговора на Thierry Templier:
Шаблон на компонента:
*ngFor="#todo of todos | sort"
Код на компонента:
@Component({
selector: 'my-app',
templateUrl: "./app/todo-list.component.html",
providers: [TodoService],
pipes: [ TodosSortPipe ]
})
Код на тръбата:
import { Pipe } from "angular2/core";
import {Todo} from './todo';
@Pipe({
name: "sort"
})
export class TodosSortPipe {
transform(array: Array<Todo>, args: string): Array<Todo> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
Опитвам се да сортирам масив от Тодо
, подреден по свойството завършено
. Първо todo.completed = false
и след това todo.complete = true
.
Не разбирам много добре метода transform
и как да предам аргументите в този метод и в метода sort
.
Какъв е аргументът args: string
? Какво представляват a
и b
и откъде идват?
Можете да реализирате персонализирана тръба за тази цел, която използва метода sort
на масивите:
import { Pipe } from "angular2/core";
@Pipe({
name: "sort"
})
export class ArraySortPipe {
transform(array: Array<string>, args: string): Array<string> {
array.sort((a: any, b: any) => {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
return array;
}
}
И след това да използвате този канал, както е описано по-долу. Не забравяйте да посочите вашия канал в атрибута pipes
на компонента:
@Component({
(...)
template: `
<li *ngFor="list | sort"> (...) </li>
`,
pipes: [ ArraySortPipe ]
})
(...)
Това е прост пример за масиви с низови стойности, но можете да имате някои разширени обработки за сортиране (въз основа на атрибути на обекти в случай на масив от обекти, въз основа на параметри за сортиране, ...).
Ето и един пример за това: https://plnkr.co/edit/WbzqDDOqN1oAhvqMkQRQ?p=preview.
Надявам се да ви помогне, Тиери
Създадох тръба OrderBy, която прави точно това, от което се нуждаете. Тя поддържа и възможност за сортиране по няколко колони на изброимост от обекти.
<li *ngFor="#todo in todos | orderBy : ['completed']">{{todo.name}} {{todo.completed}}</li>
Тази тръба позволява добавянето на повече елементи към масива след визуализиране на страницата и ще сортира масива с актуализациите динамично.
Имам запис на процеса тук.
А ето и работеща демонстрация: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby и https://plnkr.co/edit/DHLVc0?p=info.