Angular 5 - 'json does not exist on type Object'

Question

我正在遵循一个简单的指南并根据我的需要对其进行轻微修改 - 但我终于在 mapping 和 subscribing 方面遇到了麻烦

https://www.sitepoint.com/mean-stack-angular-2-angular-cli/ - 这是指南，一切正常，直到我在构建完 List Service 之后构建应用程序。

由于 Angular 5，我做了一些修改，例如替换为 HttpClient，但没有任何异常。

我现在的问题在于这两个功能:

  public getAllTasks():Observable<Task[]> {
    let URI = `${this.serverApi}/tasks/`;
    return this.http.get(URI)
      .map(res => res.json())
      .map(res => <Task[]>res.tasks);
  }



  public deleteTask(taskId : string){
    let URI = `${this.serverApi}/tasks/${taskId}`;
    let headers = new HttpHeaders;
    headers.append('Content-Type', 'application/json');
    return this.http.delete(URI,  {headers})
      .map(res => res.json());

  }

连我的 IDE 都告诉我

  .map(res => res.json())

在这两个函数中都不起作用，说:属性“json”在类型“Object”上不存在。

我搜索了一下，发现了一些较旧的帖子，其中包含一些建议，例如将其修改为

  .map((res: Response) => res.json())

但这给了我一个非常相似的错误

A function whose declared type is neither 'void' nor 'any' must return a value.

我的模型是:

export interface Task {
  _id?: string;
  title: string;
  description: string;
  category: string;
}

最初这是一个类，但我按照建议将其修改为接口(interface)。我不确定这是否相关。

不确定它是否是相对的，但它的组件方面是:

 ngOnInit() {
    this.loadTasks();
  }

  public loadTasks() {

    this.taskServ.getAllTasks().subscribe(
      response => this.tasks = response,
    )
  }

我认为这是我对 map 的工作方式或它的期望有一些困惑。任何输入将不胜感激。

更新

Angular - res.json() is not a function

如本文所述，HttpClient 似乎 native 返回 JSON 格式的 res，因此实际上删除这些行消除了错误。一旦我证明了我的完整解决方案，我会发布。

Answer 1

使用 HttpClient，你不需要 map(res => res.json())您可以从 json 中获取数据，如下所示:

    public getAllTasks():Observable<Task[]> {
        let URI = `${this.serverApi}/tasks/`;
        return this.http.get<Task[]>(URI);
    }

参见 https://angular.io/guide/http

在您调用服务的组件中，您可以订阅异步数据:

 export class TestComponent implements OnInit {
    tasks: Task[];

    constructor(private taskService: MyTaskService) {
    }

    ngOnInit(): void {
     this.taskService.getAllTasks().subscribe((data: Task[]) => {
          this.tasks = data;
        });
    }

    //other methods

    }

在列出任务的 HTML 中，您应该使用可选的链接运算符 {{ tasks?.length }}，以避免浏览器控制台中可能出现的错误。