Блог

Я новичок в этой области, каждый день учусь у вас, сегодня у меня возникла эта проблема, но я читал другой пост, но я не могу понять, что происходит. Я покажу вам свой сервис и домашний компонент.

Я пытаюсь распечатать эти данные. https://www.thecocktaildb.com/api/json/v1/1/random.php

Обслуживание

 import { Injectable } from '@angular/core';
//Get Data from API
import { HttpClient } from '@angular/common/http';
//MAP Array OF OBJECTS
import { map } from 'rxjs/operators';

@Injectable({
  //Providing this service into app.MODULE
  providedIn: 'root'
})
export class CocktailService {

  constructor(private http: HttpClient) {

    console.log('Cocktail SERVICE READY')

  }

  getRandomCocktail() {
    this.http.get('https://www.thecocktaildb.com/api/json/v1/1/random.php')
        .pipe(map ( data => {
          return data['drinks'].srtDrink;
        }));
        // .subscribe( resp => {
        //   console.log(resp);
        // })
  }
}

  

Домашний компонент (проблема с подпиской, здесь)

 import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CocktailService } from '../../services/cocktail.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  cocktailData: any[] = [];
  constructor( private http: HttpClient,
                private cocktail: CocktailService ) {

        this.cocktail.getRandomCocktail()
        .subscribe( (data: any) => {
          this.cocktailData = data
          return this.http.get('https://www.thecocktaildb.com/api/json/v1/1/random.php');
        });
   }
}

  

Я буду очень признателен за вашу помощь, чтобы понять, что здесь происходит с .subscribe
Нужно ли подписываться из компонента? Я получаю данные в службу, я потерян.
Я следую руководству, но использую другой API.

Заранее спасибо.