показывая console.log наблюдаемый массив в angular 8 - PullRequest
Новая
       43

показывая console.log наблюдаемый массив в angular 8

0 голосов
/ 16 июня 2020

Я пытаюсь показать ответ наблюдаемого на консоли, который поступает от службы в моем проекте angular. Но, похоже, это не определено. Когда я пытаюсь использовать al oop, ошибка в консоли говорит о том, что она не повторяется, в то время как наблюдаемый объект должен возвращать массив. Почему это могло происходить?

Компонент 

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

  heroes: Hero[];          

  constructor(private heroService: HeroService, private messageService: MessageService) { }

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(data => this.heroes = data);     
  }


  ngOnInit() {
    this.getHeroes();
    // for(let hero of this.heroes){
    //   console.log(hero);
    // }
    console.log(this.heroes);
  }

}

Сервис 

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  private heroesUrl = 'api/heroes';  

  constructor(
    private messageService: MessageService,
    private http: HttpClient
  ) { }

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
    .pipe(
      tap(_ => this.log('fetched heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', []))
    );
  }


  private log(message: string) {
    this.messageService.add(`HeroService: ${message}`);
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      console.error(error); 

      this.log(`${operation} failed: ${error.message}`);

      return of(result as T);
    };
  }

}

1 Ответ

1 голос
/ 16 июня 2020

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

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

getHeroes(): void {
  this.heroService.getHeroes()
    .subscribe(data => {
      this.heroes = data; // <- after this point you have the result 
      console.log(this.heroes);
  });     
}
...