打字稿错误：类型 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<HttpResponse<Course[]>>，而不是Observable<Course[]>，所以你的类型不匹配。

你也可以这样做：

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

因此，当您对返回的内容进行更多操作时，您还将在 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<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;
            }));   
        }
}