Typescript error: Type Observable<Object> is not assignable to type

Question

我正在学习 MEAN 堆栈，我被困在一段曾经有效的代码上，但由于今天的原因，它似乎不想为我工作。

我收到一个错误：“类型 Observable 不可分配给类型 Observable。您是想改用 'any' 类型吗？

这是出现错误的 course.service.ts 文件：

import { Injectable } from '@angular/core'; 
import {Course} from './course'; 
import {Observable} from 'rxjs/Observable'; 
import {HttpClient} from '@angular/common/http';

    @Injectable() export class CourseService {

      constructor(private httpClient: HttpClient) { }

      readAll(): Observable<Course[]> {
        return this.httpClient
          .get('https://jsonplaceholder.typicode.com/posts');   }

    }

这里是course.component.ts:

import {Component, Input, OnInit} from '@angular/core';
import {Course} from '../course';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
  @Input()
  course: Course;

  @Input()
    courseItemCss: string;


  constructor() { }

  ngOnInit() {
    if (!this.course) {
      this.course = <Course> {};
    }

  }

}

这是界面course.ts:

 export interface Course {
  id: string;
  title: string;
  description: string;
}

course.component.ts:

import {Component, Input, OnInit} from '@angular/core';
import {Course} from '../course';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
  @Input()
  course: Course;

  @Input()
    courseItemCss: string;


  constructor() { }

  ngOnInit() {
    if (!this.course) {
      this.course = <Course> {};
    }

  }

}

course.manager.component.ts:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';
import {CourseService} from '../course.service';
import {Course} from '../course';


@Component({
  selector: 'app-course-manager',
  templateUrl: './course-manager.component.html',
  styleUrls: ['./course-manager.component.css']
})
export class CourseManagerComponent implements OnInit, OnDestroy {
  courses: Array<Course>;
  courseServiceSub: Subscription;

  constructor(private courseService: CourseService) {
    this.courses = [];
  }

  ngOnInit() {
    this.courseServiceSub = this.courseService.readAll().subscribe(courses => {
      this.courses = courses;
    });
  }

  ngOnDestroy() {
    if (this.courseServiceSub) { // if subscription exists, unsubscribe from it.
      this.courseServiceSub.unsubscribe(); // make sure to unsubscribe or may cause memory leaks which makes app slower.
    }
  }
}

我知道这很简单，但我现在想不通。任何建议都会有所帮助。谢谢！

~jb

Answer 1

问题是 httpClient returns Observable<HttpResponse<Course[]>>，而不是直接 Observable<Course[]>，所以你的类型不匹配。

你也可以这样做：

return this.httpClient
    .get<Course[]>.('https://jsonplaceholder.typicode.com/posts');

因此，当您用它 returns 做更多事情时，您也会在 readAll()

中输入

所以你的 readAll() 应该是这样的：

readAll(): Observable<HttpResponse<Course[]>> {
    return this.httpClient
        .get<Course[]>('https://jsonplaceholder.typicode.com/posts');   }

Answer 2

如原始问题的评论所述，在这种情况下，您可以像这样强投 httpClient observable：

@Injectable() 
export class CourseService {

    constructor(private httpClient: HttpClient) { }

    readAll(): Observable<Course[]> {
        return this.httpClient
            .get<Course[]>('https://jsonplaceholder.typicode.com/posts');   
        }
}

通过这种方式，您将收到 Observable<Course[]>

，而不是收到 Observable<Object>

您可能遇到另一种情况，迫使您对请求答案进行一些转换以适应您的模型，在这种情况下，您应该使用 map 运算符。将看起来像这样：

@Injectable() 
export class CourseService {

    constructor(private httpClient: HttpClient) { }

    readAll(): Observable<Course[]> {

        return this.httpClient
            .get<MyType[]>('https://jsonplaceholder.typicode.com/posts').pipe(map(myAnswers => {
                    /**
                     * Map operator is dedicated to transform original data to formated data who fit on your expected output.
                    **/
                    const myTransformedAnswer = [];

                    myAnswers.forEach((item) => {
                        myTransformedAnswer.push({
                            id: item.id,
                            title: item.foo,
                            description: item.bar
                        });
                    });

                    return myTransformedAnswer;
            }));   
        }
}

Typescript error: Type Observable<Object> is not assignable to type

Typescript error: Type Observable<Object> is not assignable to type

typescript

mean-stack

angular