Question

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

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

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>

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

这里的组件加载数据：

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

您需要检查过滤器中的值是否为空。事实上，<li class="dropdown <?php echo c("index"); ?>"> <a href="index" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="index">Customers</a></li> <li class="<?php echo c("product");?>"><a href="index#product">Products</a></li> <li class="<?php echo c("consulting");?>"><a href="index#consulting">Services</a></li> </ul> </li> <li class="dropdown <?php echo c("products,product,consulting"); ?>" > <a href="products" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products/Services<span class="caret"></span></a> <ul class="dropdown-menu"> <li class="<?php echo c("products");?>"><a href="products.php">Overview</a></li> <li role="separator" class="divider" ></li> <li class="<?php echo c("product");?>"><a href="products.php#wrapper">My product</a></li> <li class="<?php echo c("consulting");?>"><a href="products.php#consulting">Consulting/Development</a></li> </ul> </li>参数最初为空。从HTTP请求收到列表时，将使用此值再次调用过滤器。

value

正如Eric所建议的那样，你也可以利用transform(value, args) { if (value != null) { if (args[0] === true) { return value.filter((item) => item.status == 'done'); } return value.filter((item) => item.status == 'todo'); } }管道而不是直接调用你的observable上的async函数：

subscribe

您的模板需要以这种方式重构：

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

希望它可以帮到你，亨利

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

1 个答案: