【问题标题】:Angular 6 - Rxjs 6 - Type Observable<Object> is not assignable to type Observable<Item>Angular 6 - Rxjs 6 - 类型 Observable<Object> 不可分配给类型 Observable<Item>
【发布时间】:2018-11-02 17:09:51
【问题描述】:

在将我的 Angular 项目从版本 5 更新到 6 后,我收到了这个错误:

类型 Observable' 不可分配给类型 Observable'。

在我的 todo.service.ts 中

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { Todo } from '../../../models/Todo';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import 'rxjs/add/observable/throw';

@Injectable()
export class TodoService {

  todos: Todo[];

  constructor( private httpClient: HttpClient ) { }

  loadTodos(): Observable<Todo[]> {
    return this.httpClient.get<Todo[]>(`${environment.api}${environment.path}`).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }

  addTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.post(`${environment.api}${environment.path}`, JSON.stringify(todo)).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }

  editTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.put(`${environment.api}${environment.path}/${todo.id}`, JSON.stringify(todo)).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }

  deleteTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.delete(`${environment.api}${environment.path}/${todo.id}`).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }
}

错误指向 addTodo、editTodo 和 deleteTodo 方法,loadTodo 没有问题,因为它将 Observable' 类型分配给 Observable' 类型。 我使用this link 更改了 rxjs 元素的导入方式,但没有成功。有什么帮助吗?

【问题讨论】:

  • 试试post&lt;Todo[]&gt;怎么样?
  • post 表示我们发布一个数组,您能解释一下吗?
  • 使用post&lt;Todo[]&gt; 意味着发布请求将返回一个Todo 数组。您在正文中发布的内容无关紧要或改变。
  • 尝试使用 投射 post、put 和 delete 方法。例如:http.post()
  • 就像您使用 get 方法所做的一样,对其他所有内容执行相同操作,但使用 Todo 而不是 Todo[]

标签: angular rxjs observable


【解决方案1】:

httpClient 方法是通用的,你必须键入响应,例如:

    addTodo(todo: Todo): Observable<Todo> {
        return this.httpClient.post(`${environment.api}${environment.path}`, JSON.stringify(todo)).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }

必须这样使用:

    addTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.post<Todo>(`${environment.api}${environment.path}`, JSON.stringify(todo)).pipe(
      catchError((error: any) => Observable.throw(error))
    );
  }

【讨论】:

  • 是的,正如@ChauTran 2 小时前回答的那样,但是 HttpClient 如何可以通用 Angular 6 而不是 Angular 5,该服务在 Angular 5 中没有问题。
  • 嗯,我想念“...post”。谢谢!
猜你喜欢
  • 2017-03-30
  • 2020-11-23
  • 1970-01-01
  • 1970-01-01
  • 2018-07-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-12
相关资源
最近更新 更多