json - 按值过滤对象的angular2 typescript 数组

Question

我有一个从 JSON 文件获取数据的数组。我能够将对象数组存储到我的 Task[] 中。现在我想按状态(“已提交”或“已解决”等)检索数据。我尝试了很多方法，但无法实现。请帮助我。

data: [{
  taskname: 'Test1',
  taskId: '1',
  status: 'Submitted'
}, {
  taskname: 'Test2',
  taskId: '2',
  status: 'Resolved'
}, {
  taskname: 'Test3',
  taskId: '4',
  status: 'Submitted'
}, {
  taskname: 'Test4',
  taskId: '5',
  status: 'In Progress'
}, {
  taskname: 'Test5',
  taskId: '6',
  status: 'Resolved'
}, {
  taskname: 'Test6',
  taskId: '7',
  status: 'Submitted'
}
}]

任务.ts

export interface Task {
  taskId: any;
  taskname: any;
  status: any;
}

任务服务.ts

getTask() {
  return this.http.get('../app/common/task.json')
    .toPromise()
    .then(res => < Task[] > res.json().data)
    .then(data => {
      return data;
    });

}

任务组件.ts

export class TaskComponent implements OnInit {
  taskList: Task[];
  datasource: Task[];
  sortedList: Task[];
  ngOnInit() {
    this.taskService.getTask().then(files => this.files = files);
    this.vecService.getData().then(taskList => {
      this.datasource = taskList;
      this.taskList = this.datasource; // Storing data into my task list array
    });
  }
}

这是我尝试按状态过滤的内容:

 this.sortedList = this.taskList.filter(
      task => task.status ==='Submitted');

显示以下错误:

Cannot read property 'filter' of undefined

Answer 1

这是因为 promises/HTTP 请求是异步的。您需要在 promises 的回调中添加过滤器，如果将其放在 taskList 之外，则将未定义，因此无法应用过滤器

this.vecService.getData().then(taskList => {
        this.datasource = taskList;
        this.taskList = this.datasource;// Storing data into my task list array
        this.sortedList = this.taskList.filter(
        task => task.status ==='Submitted');

    });