Angular2排序管使用对象数组 [英] Angular2 Sorting Pipe with Object Array

问题描述

我有一个待办事项列表，（待办事项[]），我想我每次做一些修改时间排序。我想要完成待办事项在列表的底部显示。该ToDo对象有一个名为.completed属性存储一个布尔值，它会告诉我们，如果待办事项被完成与否。

I have a TODOs list, (Todo[ ]) and I want to sort it every time I make some changes. I want that the completed todo are displayed at the bottom of the list. The Todo object has a property named .completed that stores a boolean value, it will tell us if the todo is completed or not.

在Angular2的排序依据管道不存在。因此，我们必须建立它：

In Angular2 the "OrderBy" pipe does not exist. So we have to build it:

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

If you didn't understand the sort method check MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

管道完成后，让我们继续前进到Component。

The Pipe is done, let's move to the Component.

该AppComponent类，创建待办事项的数组，称为托多斯，正从一个模拟的对象与服务。

The AppComponent class, creates an array of Todo, called Todos, getting the objects from a mock with a service.

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>

演示：

有关的所有code中的完整的例子： https：//开头plnkr .CO /编辑/ VICRMVNhqdqK9V4rJZYm？p = preVIEW
看着它在GitHub上： https://github.com/AndreaMiotto/Angular2-TodoApp

仅管在默认情况下，当你管的输入参数的变化，而不是在你的数据的变化而变化。
纯设置为false，你会使其unpure这样你管会随时更新。

Pipes only change by default when your Pipe input parameters change and not when your data changes. Setting Pure to false, you will make it "unpure" so you pipe will always update.

推荐答案

更改此行：

<li *ngFor="#todo of todos | async | sort; #i=index" class="list-group-item completed" [class.completed]="todo.completed">{{todo.name}}</li>

我复制你管code到这个Plunker：

I copied your Pipe code into this Plunker:

https://plnkr.co/edit/RBpZilgxIyRDLwktNZN1?p=$p$ PVIEW

这篇关于Angular2排序管使用对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！