实例变量未在 Observable<> 订阅中分配？

Question

从 Obersavable 订阅时，出于某种原因，我的游戏数组没有被分配，即使我确实从服务器获得了正确的数据（数组）。

这是我的 game.service.ts：

import { Injectable } from '@angular/core';
import { Game } from '../models/game';
import { of, Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { NGXLogger } from 'ngx-logger';

@Injectable({
  providedIn: 'root'
})
export class GameService {
  private gamesUrl: string = 'api/games';

  constructor(private http: HttpClient, private logger: NGXLogger) { }

  getGames(): Observable<Game[]> {
    return this.http.get<Game[]>(this.gamesUrl);
  }

  getGame(id: number): Observable<Game> {
    const url: string = (`${this.gamesUrl}/${id}`);
    return this.http.get<Game>(url).pipe(tap(_ => this.logger.debug(`fetched game id=${id}`)), catchError(this.handleError<Game>(`getGame id=${id}`)));
  }

  log (operation: string) {
    console.log(operation);
  }

    /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      console.error(error); // log to console instead
      this.logger.debug(`${operation} failed: ${error.message}`);
      return of(result as T);
    };
  }
}

这是我的 games.component.ts：

import { Component, OnInit } from '@angular/core';
import { Game } from '../../models/game';
import { GameService } from 'src/app/services/game.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-games',
  templateUrl: './games.component.html',
  styleUrls: ['./games.component.css']
})
export class GamesComponent implements OnInit {
  games: Game[];

  constructor(private gameService: GameService) { 
  }

  ngOnInit() {
    this.getGames();
  }

  getGames(): void {
    this.gameService.getGames().subscribe(games => this.games = games);
    console.log(`games: ${this.games}`);
  }

  getGame(id: number): Observable<Game> {
    return this.gameService.getGame(id);
  }
}

如您所见，我正在 games.component.ts 中调用 getGames，其中 game.service.ts正在返回响应（Observable）。

由于某种原因 subscribe(games => this.games = games) 不起作用，我得到了 games 实例变量的“未定义”。 我肯定会得到正确的响应，因为 subscribe(games => console.log(games)) 不显示“未定义”，而是显示一个对象数组。

为什么没有分配我的实例变量？

编辑： 这是console.log中的输出，如果我订阅(games => console.log(games))

编辑： 如果我执行以下操作，则控制台日志是正确的。但是，如果我引用它之外的“游戏”数组，我会再次未定义：

  getGames(): void {
    this.gameService.getGames().subscribe((games) => {
      this.games = games;
      console.log(`games: ${this.games}`);
    });
    console.log(`all games: ${this.games}`); //this is undefined
  }

编辑：已解决 - 谢谢 dileepkumar jami 解决方案是删除 $ 符号和 '|我的模板中的“异步”：

<li *ngFor="let game of games$ | async">{{game.title}}</li>

到

<li *ngFor="let game of games">{{game.title}}</li>

Answer 1

  1.    getGames(): void { 
  2.      this.gameService.getGames().subscribe((games) => {
  3.        this.games = games;
  4.        console.log(`games: ${this.games}`);
  5.      });
  6.      console.log(`all games: ${this.games}`); //this is undefined
  7. }

我给你的代码行编号了。

正如预期的那样，the line6 将返回 undefined。

line 2 to line 5 的代码需要一些时间才能完成，因为它有一个 API 调用。

因为 Javascript 是异步的，它不会等待代码（从第 2 行到第 5 行）完成。 它开始执行line6。但是，到那时，this.games 是undefined。

即使你在浏览器控制台中看到，你也会看到line6的输出首先然后你可以看到line4

您可以执行以下代码块来查看 javascript 是如何异步工作的

function myFunction() {
  console.log('Hello');
}

setTimeout(myFunction, 3000);
console.log('hi');

As you can see, even though console.log('hi'); was written after setTimeout(myFunction, 3000);, hi would be printed first and then hello.

<p> So, javascript did not wait for the setTimeout(myFunction, 3000); to be finished and it started to execute the next line
</p>

编辑：已解决 - 谢谢 dileepkumar jami 解决方案是删除 $ 符号和 '|我的模板中的“异步”：

<li *ngFor="let game of games$ | async">{{game.title}}</li>

到

<li *ngFor="let game of games">{{game.title}}</li>