Question

我有一个

类：

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

服务：

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

在我的组件中：

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

和html文件：

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

问题是，当我尝试将此管道用于filter已完成的待办事项时，我不断收到错误消息，指出无法读取filter的属性undefined。

我做错了什么或者有没有办法在不使用pipe的情况下过滤它？

我的烟斗：

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

谢谢。

Answer 1

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

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

1 个答案: