Блог

Главная - Вопросы по программированию - HttpClient и наблюдаемый не дает ожидаемых данных

HttpClient и наблюдаемый не дает ожидаемых данных

#typescript #observable #httpclient #angular-httpclient #angular11

Вопрос:

Поэтому я пытаюсь использовать HttpClient и observable для получения данных из api, записанных в файле service.ts, но вместо этого он возвращает мне сервис в консоли браузера. Но когда я использовал тот же URL-адрес с fetch и .then().then (), он возвращает данные, как и ожидалось

это мой файл service.ts

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ServiceService {
apiUrl = 'https://www.breakingbadapi.com/api/characters';

   constructor(private http: HttpClient) { }

    getChar(): Observable<any> {
      return this.http.get<any>(this.apiUrl);
  }
 }

это мой файл characters.component.ts

 import { Component, OnInit } from '@angular/core';

import  { ServiceService } from '../../services/service.service'

@Component({
selector: 'app-characters',
templateUrl: './characters.component.html',
styleUrls: ['./characters.component.scss']
})
export class CharactersComponent implements OnInit {
characters = []

 constructor(private service: ServiceService) { }

  ngOnInit(): void {
  this.service.getChar().subscribe(value => this.characters = value)
   console.log(this.service);
   }

    }

Ожидаемый Ответ

 {
char_id: 1,
name: "Walter White",
birthday: "09-07-1958",
occupation: [
    "High School Chemistry Teacher",
    "Meth King Pin"
],
   img: "https://images.amcnetworks.com/amc.com/wp- 
   content/uploads/2015/04/cast_bb_700x1000_walter-white-lg.jpg",
status: "Deceased",
appearance: [1, 2, 3, 4, 5],
nickname: "Heisenberg",
portrayed: "Bryan Cranston"
}

Вместо Этого Получаем
Этот Вывод

Метки: