类型 'Observable<Promise<any>>' 不能分配给类型 'Observable<myRec[]>'。缺少类型“Promise<any>”答案

【问题标题】：Type 'Observable<Promise<any>>' is not assignable to type 'Observable<myRec[]>'. Type 'Promise<any>' is missing类型 'Observable<Promise<any>>' 不能分配给类型 'Observable<myRec[]>'。缺少类型“Promise<any>”
【发布时间】：2021-01-10 20:44:49
【问题描述】：

所以我打算让 NG 在组件的生命周期内处理订阅，让它自动订阅/取消订阅。

这是我的服务，为外部端点的调用提供 observable，MySvc.ts

import { Injectable  } from '@angular/core';
import { HttpClient, HttpRequest, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
import { Observable, throwError } from 'rxjs';
const url = '...';
@Injectable()
export class MySvc{
constructor(private http: HttpClient) { } 
getAllRec()
{
  return this.http.get(url).pipe(map((res: Response) => res.json()));
}

myRec.ts

export interface myRec
{
  name: string;
}

我的展示组件MyPage.ts

import { Component, OnInit } from '@angular/core';
import { MySvc } from '..MySvc.service';
import { Observable, of} from "rxjs";
import { myRec} from '../models/myRec';     
@Component({...})
export class MyPage implements OnInit {
  public allRec$: Observable<myRec[]>;
constructor(private MySvc: MySvc) {}
ngOnInit()
{
  this.allRec$ = this.MySvc.getAllRec(); // see compiling error below
}

类型 'Observable' 不可分配给类型 '可观察的'。类型“承诺”缺少以下内容 'myRec[]' 类型的属性：length、pop、push、concat 等 26 个

【问题讨论】：

标签： angular

【解决方案1】：

问题是您在响应中调用 .json，您可以在此处看到：https://developer.mozilla.org/en-US/docs/Web/API/Response 返回一个承诺

Angular 已经为您解析了响应，因此您不需要这样做，因此只需从 getAllRec 函数中删除 map 并对该函数进行参数化，以便 Angular 知道响应包含一个数组myRec点赞：

getAllRec()
{
  return this.http.get<myRec[]>(url);
}

您可以在此处看到这不会给您解析错误：
https://stackblitz.com/edit/angular-ivy-vhrk6d?file=src/app/app.module.ts

当然我没有你的网址，所以我无法测试方法本身，但我认为这应该足够好了:)

【讨论】：

另外@Jeb50 这可能只是我的意见，但我真的强烈建议您坚持使用 Angular 的命名约定，myRec 是一个类型应该是 cMyRec，而不是 @ 987654330@ 使用 myService 之类的东西（虽然我想你只是将它们用作 POC，但这仍然会极大地帮助你的代码更具可读性/可理解性）。
包括命名约定在内的要点。在(url) 解决编译错误后删除了所有内容，但不会输出到外部的 API 端点。 :(
是因为你没有订阅吗？请记住，可观察对象是懒惰的，如果您不订阅它们，它们不会做任何最简单的事情，就是使用 async 管道在模板中读取您的 allRec$
查看 MyPage.ts，它确实订阅了 public allRec$: Observable<myRec[]>; ... this.allRec$ = this.MySvc.getAllRec();
和 Debug 显示执行从 MyPage.ts 转到 MySvc.ts。 NG，对不起。

【解决方案2】：

改变

getAllRec()
{
  return this.http.get(url).pipe(map((res: Response) => res.json()));
}

到

getAllRec()
{
  return this.http.get<myRec[]>(url);
}

你的类型错了；

【讨论】：