gpt4 book ai didi

angular - typescript 错误 : Type Observable is not assignable to type
转载 作者:行者123 更新时间:2023-12-03 23:30:01 25 4
gpt4 key购买 nike

我正在学习 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

最佳答案

正如在原始问题的评论中指定的那样,在这种情况下,您可以像这样强转换 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运算符(operator)。将看起来像这样:
@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;
}));
}
}

关于angular - typescript 错误 : Type Observable<Object> is not assignable to type,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49849816/

25 4 0