Angular 2如何过滤视图中的对象

Question

我在过滤视图中的对象时遇到问题。我的目标是从一个简单的网络服务加载一个任务列表（任务只有一个名称和一个状态（待办/完成））。

当我不使用 web 服务并且数据在我的服务中被硬编码时，我设法使用这样的自定义管道过滤我的结果

transform(value, args) {
    if (args[0] === true)
        return value.filter((item) => item.status == 'done');
    return value.filter((item) => item.status == 'todo');
}

视图是这样的

<ul class="list-group">
<li  class="list-group-item" *ngFor="#task of tasks | done: false">
    <button  class="btn btn-default btn-xs pull-right" (click)="task.setStatus('done')" *ngIf="(task.status == 'todo')">Done</button>
    {{ task.name }}
</li>

但由于我是从外部源加载数据，我无法使我的自定义管道工作，value 未定义可能是因为异步数据。

这里是组件加载数据：

export class TaskComponent implements OnInit {
task = new Task();
public tasks: Task[];

constructor(public _taskService: TaskService) { }

getTasks() {
    this._taskService.getWsTask().subscribe(tasks => this.tasks = tasks);
}

ngOnInit() {
    this.getTasks();
}

以及相关的服务

export class TaskService {
tasks: Task[];

constructor(public http: Http) {
    console.log('Task Service created.');
}

public getWsTask(){
    return this.http.get('http://localhost:3000/tasks')
        .map((responseData) => responseData.json())
        .map((tasks: Array<any>) => {
            let result: Array<Task> = [];
            if (tasks) {
                tasks.forEach((task) => {
                    result.push(
                        new Task(task.name, task.status));
                });
            }
            return result;
        });
        ;
}

您可以在这里找到我的服务类和组件：enter link description here

感谢您的帮助

Answer 1

您需要检查过滤器中的值是否为空。事实上，value 参数一开始是空的。当从 HTTP 请求接收到列表时，将使用该值再次调用过滤器。

transform(value, args) {
  if (value != null) {
    if (args[0] === true) {
      return value.filter((item) => item.status == 'done');
    }
    return value.filter((item) => item.status == 'todo');
  }
}

按照 Eric 的建议，您还可以利用 async 管道，而不是直接在 observable 上调用 subscribe 函数：

getTasks() {
  this.tasks = this._taskService.getWsTask();
}

您的模板需要这样重构：

<ul class="list-group">
  <li class="list-group-item" *ngFor="#task of (tasks | async | done: false)">
    <button class="btn btn-default btn-xs pull-right"
            (click)="task.setStatus('done')"
            *ngIf="(task.status == 'todo')">Done</button>
      {{ task.name }}
  </li>
</ul>

希望对你有帮助 蒂埃里