如何将订阅调用中的数据分配给Angular中的局部变量答案

【问题标题】：how do i assign data from the subscribe call to a local variable in Angular如何将订阅调用中的数据分配给Angular中的局部变量
【发布时间】：2022-01-17 17:56:45
【问题描述】：

我试图在 ngOnInit() 中声明变量，但它超出了范围。我想使用该变量来迭代数据并填充我的 html 组件。我已经在同一问题上关注了已回答的问题，但其中大多数建议在订阅函数中调用一个函数，不幸的是，在我的情况下，我只需要查看返回的数据。

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),
    });
  }
}

这里是服务类

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)
}

}

【问题讨论】：

您能分享一下getPlaylist() 在您的服务中是如何定义的吗？
` getPlaylist():Observable { return this.http.get(this.playListUrl).pipe( map((response) => response), catchError(this.handleError), ); } `
最好将该代码附加到您的上述问题中，以便对其进行格式化。您能否还包括handleError 的作用？
如果console.log(this._playList) 在你的下一个子句中记录了正确的值，这意味着它有效。不过，您稍后会在哪里尝试使用该本地属性？您是否可能错误地认为调用是同步的，并试图在订阅调用之后立即使用该值？
@Stavm 你是对的，局部变量已经有了数据，只是我在模板 _playList 而不是 _playList.data 中使用了错误的格式。谢谢

标签： javascript angular typescript rxjs observable

【解决方案1】：

我不知道您的 Playlist 对象是什么样的，但也许我有一个简单的想法，可以解决您的问题。我想 console.log 不能显示你的对象数组。您是否尝试过以下操作？

console.log(this._playList[0]);

【讨论】：

导致未定义