Тип 'Наблюдаемый<Обещание>' не может быть присвоен типу 'Наблюдаемый'. Тип 'Обещание' отсутствует

#angular

#угловой

Вопрос:

Поэтому я намерен позволить 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
}

Тип ‘Наблюдаемый<Обещание>’ не может быть присвоен типу
‘Наблюдаемый<myRec[]>’ . У типа ‘Promise’ отсутствуют следующие
свойства из типа ‘myRec[]’: length, pop, push, concat и еще 26

Ответ №1:

Проблема в том, что вы вызываете .json ответ, который, как вы можете видеть здесь: https://developer.mozilla.org/en-US/docs/Web/API/Response возвращает обещание

Angular уже анализирует ответ для вас, поэтому вам не нужно этого делать, поэтому просто удалите map из getAllRec функции, а также параметризируйте функцию, чтобы angular знал, что ответ содержит массив myRec подобных:

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

Здесь вы можете видеть, что это не приводит к ошибке синтаксического анализа:
https://stackblitz.com/edit/angular-ivy-vhrk6d?file=src/app/app.module.ts

Естественно, у меня нет вашего URL, поэтому я не могу протестировать сам метод, но я думаю, что этого должно быть достаточно 🙂

1. Также @Jeb50 это может быть только мое мнение, но я бы действительно настоятельно рекомендовал вам придерживаться соглашений об именовании Angular, поскольку myRec тип должен быть c MyRec , а также вместо MySvc того, чтобы использовать что-то вроде myService (хотя я полагаю, что вы просто используете их как POC, тем не менее, это очень помогло бы в создании вашегокод более читаемый / понятный).

2. Отличные моменты, включая соглашение об именовании. Удалил все после (url) устранения ошибки компиляции, но оно не будет выходить на конечную точку API снаружи. 🙁

3. это потому, что вы не подписываетесь на него? помните, что наблюдаемые ленивы, если вы не подписываетесь на них, они ничего не делают, проще всего прочитать ваш allRec$ в шаблоне с помощью async канала

4. смотрите MyPage.ts , он подписывается public allRec$: Observable<myRec[]>; ... this.allRec$ = this.MySvc.getAllRec();

5. и отладка показывает, что выполнение выполняется из 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);
}

ваш тип был неправильным;