He intentado declarar la variable dentro de ngOnInit() pero se sale del alcance. Me gustaría usar la variable para iterar sobre los datos y completar mi componente html. He seguido las preguntas respondidas sobre el mismo problema, pero la mayoría sugiere llamar a una función dentro de la función de suscripción, desafortunadamente, en mi caso, solo necesito ver los datos devueltos.

 import { Component, OnInit } from "@angular/core"; import { Playlist } from "../playlist"; import { PlaylistService } from "../playlist.service"; @Component({ selector: "app-market-place", templateUrl: "./market-place.component.html", styleUrls: ["./market-place.component.css"], }) export class MarketPlaceComponent implements OnInit { _playList: Playlist[] = []; //never gets assigned here errorMessage; constructor(private playListService: PlaylistService) {} ngOnInit() { this.playListService.getPlaylist().subscribe({ next: (playList) => { this._playList = playList; console.log(this._playList); // am able to log the data but its never assigned to my _playList variable }, error: (err) => (this.errorMessage = err), }); } }

aquí está la clase de servicio

 import { Injectable } from "@angular/core"; import {HttpClient, HttpErrorResponse} from '@angular/common/http' import { Observable, throwError } from "rxjs"; import {catchError, map, tap} from 'rxjs/operators' import { Playlist } from "./playlist"; @Injectable({ providedIn: "root", }) export class PlaylistService { private playListUrl = "https://reqres.in/api/users"; constructor(private http: HttpClient) {} getPlaylist():Observable<Playlist[]> { return this.http.get<Playlist[]>(this.playListUrl).pipe( map((response) => <Playlist[]>response), catchError(this.handleError), ); } private handleError(err:HttpErrorResponse){ let errorMessage = ''; if (err.error instanceof ErrorEvent){ errorMessage = `An error occurred: ${err.error.message}` }else { errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`; } console.error(errorMessage); return throwError(errorMessage) } }