打字稿错误：类型 Observable<Object> 不可分配给类型

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 observable：

@Injectable() 
export class CourseService {

    constructor(private httpClient: HttpClient) { }

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

通过这种方式，而不是接收Observable<Object>你会收到Observable<Course[]>

您可以有另一个案例，它迫使您从请求答案中应用一些转换以适合您的模型，在这种情况下，您应该使用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;
            }));   
        }
}