Angular中Observable用map报错.map is not a function问题排查

嘿，我一眼就看出问题出在哪了——你把RxJS Observable的操作符和数组的原生方法搞混啦！

错误原因 #

你的this.tasksService.tasks是一个Observable<Task[]>对象，而不是实际的Task数组。你直接调用的.map()是数组的原生方法，但Observable本身并没有这个方法，所以才会抛出"map is not a function"的错误。虽然你导入了RxJS的map操作符，但没有用正确的方式去使用它——RxJS的操作符必须通过pipe()方法来组合应用。

修正步骤 #

1. 确保你已经正确导入RxJS的map操作符（如果还没加的话）：

import { map } from 'rxjs/operators';

2. 修改tasks.component.ts里的ngOnInit方法，用pipe()包裹RxJS的map操作符，在map内部再对数组使用filter：

ngOnInit() {
  this.tasks = this.tasksService.tasks.pipe(
    // 这里的map是RxJS操作符，用来转换Observable发射的值
    map(tasksArray => {
      // 这里的filter是数组原生方法，过滤符合条件的任务
      return tasksArray.filter(task => task.isDone === this.completed);
    })
  );
  this.tasksService.getTasks();
}

额外注意事项 #

• 如果你在模板中渲染tasks，记得要用async管道来自动订阅Observable，比如：

<div *ngFor="let task of tasks | async">
  {{ task.name }}
</div>

• 可以给tasks.service.ts里的x.json()加上类型断言，避免类型歧义：

this._tasks.next(x.json() as Task[]);

这样修改后，你的过滤逻辑就能正常工作啦！

内容的提问来源于stack exchange，提问作者Drobesz