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

Question

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

我收到一个错误："可观察类型不可分配给可观察类型。您的意思是改用"任何"类型吗？

下面是出现错误的 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> {};
    }
  }
}

这是界面课程.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可观察：

@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;
            }));   
        }
}

Answer 2

问题是 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');   }