angularjs - 使用管道 Angular 2 过滤对象数组

Question

我有一个

class:

export class Todo {
    public id: number;
    public name: string;
    public isCompleted: boolean;
    public dateCreated: Date;
    public userName: string;
}

A service:

getTodos(): Observable < Todo[] > {
    return this.http.get(this.todosUrl)
        .map(this.extractData)
        .catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body || {};
}

In my component:

getTodos(){
    this.todoService.getTodos()
      .subscribe(
        todos => this.todos = todos,
        error => this.errorMessage = <any>error
      );
}

And html file:

<div class="ui large selection animated divided list">
    <a *ngFor="let todo of (todos | todoFilter:false)" class="item">
        <div class="right floated content">
            <div class="ui vertical animated negative button" tabindex="0">
                <div class="hidden content">Delete</div>
                <div class="visible content">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </div>
            </div>
        </div>
        <i class="minus square outline icon"></i>
        <div class="content">
            <div class="header">{{todo.name}}</div>
            <div class="description">{{todo.dateCreated | date:"MMM-dd-yyyy"}}</div>
        </div>
    </a>
</div>

问题是，当我尝试使用此管道过滤已完成的待办事项时，我不断收到一条错误消息，提示 Cannot read property filter of undefined 。

我是不是做错了什么，或者有什么方法可以在不使用 pipe 的情况下过滤它吗？

My pipe:

transform(allTodos: Todo[], args?: boolean){
    if (allTodos === null) {
      return null;
    }
    return allTodos.filter(todo => todo.isCompleted);
}

谢谢。

Answer 1

尝试将 if (allTodos === null) 替换为 if (!allTodos)我认为问题在于，即使您的 this.todos 仍然是空的，您也会进入 .filter，因为您只是检查它是否不为空。