почему приложение angular не может получить данные ответа HTTP?

Question

Начал изучать angular сервисы и DI, но застрял, пытаясь получить json данные из URL в сервисе. Это код service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Employees } from '../models/emp';

@Injectable()
export class EmployeeService {

  url = 'http://www.mocky.io/v2/5e712acd30000029007a34b8';

  constructor(
    private http: HttpClient
  ) { }

  getEmployees(): Observable<Employees> {
    // make http request to the given url and fetch the contacts
    return this.http.get<Employees>(this.url);
  }

}

Ошибка в консоли:

HttpErrorResponse {headers: {…}, status: 0, statusText: «Неизвестная ошибка», URL: «http://www.mocky.io/v2/5e712acd30000029007a34b8»…}

Ссылка на демонстрационное приложение stackblitz:

https://stackblitz.com/edit/angular-osuap2

Answer 1

Ваша проблема в том, что ваш интерфейс не соответствует вашему ответу.

Если ваш ответ API

{
   "empList": [
        {"id": 1, "name": "emp1", "city": "city1"},
        {"id": 2, "name": "emp2", "city": "city2"},
        {"id": 3, "name": "emp3", "city": "city3"},
        {"id": 4, "name": "emp4", "city": "city4"}
    ]    
}

И вы делаете следующий запрос:

getEmployees(): Observable<Employees> {
  // make http request to the given url and fetch the contacts
  return this.http.get<Employees>(this.url);
}

Тогда ваш интерфейс сотрудников должен соответствовать ответу:

export interface Employees {
  empList: Employee[];
}

export interface Employee {
  id: number;
  name: string;
  city: string;
}

Ваш поддельный URL-адрес API также должен быть https.

DEMO: https://stackblitz.com/edit/angular-mr9dz4