Переменная показывает undefined в Angular9

Question

Я новичок в Angular 9 и, следовательно, столкнулся с проблемами. Я использую ioni c 5 + Angular 9 Переменная отображается как undefined, когда я пытаюсь ее console.log. Описание немного длинное, пожалуйста, подождите.

Для начала у меня есть следующий ответ:

{
"level_labels": [
    "Chapter",
    "Shloka"
],
"total_first_level_terms": 18,
}

Я хочу, чтобы sh значения ключей были массив, так что мой массив выглядит как [["Chapter","Sloka"],18]

Я создал службу с именем Heritage -text.service, и следующая функция извлекает значения ключей из ответа выше:

    import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { HeritageText } from './heritage-texts.model';

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

    toc = [];



   constructor(private http: HttpClient) { }

    getTOCHeritageText(heritageId : string) {

      this.fetchTOC(heritageId).subscribe(response => {


      for(const key in response){
        if( response.hasOwnProperty(key)) {
           this.toc.push(response[key]);
     }

   }

     console.log(this.toc});
  });
  return this.toc;
 }
 }

console.log (до c) показывает желаемый массив при вызове функции. Это страница, на которой я пытаюсь сохранить в console.log переменную ngOnInit ():

 import { Component, OnInit } from '@angular/core';
    import { HeritageText } from '../heritage-texts.model';
    import { ActivatedRoute } from '@angular/router';
    import { HeritageTextsService } from '../heritage-texts.service';

   @Component({
     selector: 'app-heritage-text-detail',
     templateUrl: './heritage-text-detail.page.html',
     styleUrls: ['./heritage-text-detail.page.scss'],
     })
   export class HeritageTextDetailPage implements OnInit {

  loadedHeritagetextTOC;

  constructor(private activatedRoute: ActivatedRoute, private heritageTextsService: HeritageTextsService) { }

  ngOnInit() {

    this.activatedRoute.paramMap.subscribe(paramMap => {
      if(!paramMap.has('heritageId')) {
        return;
      }
      const heritageId = paramMap.get('heritageId');

      this.loadedHeritagetextTOC = this.heritageTextsService.getTOCHeritageText(heritageId);
      console.log(this.loadedHeritagetextTOC);

    });

  }


}

console.log (this.loadedHeritagetextTO C) показывает undefined.

Answer 1

Поскольку вы имеете дело с асинхронными наблюдаемыми объектами (HTTP-запрос), вы должны вернуть его и подписаться на него только в своем компоненте.

Ваша служба:

getTOCHeritageText(heritageId: string): Observable<any> {
 return this.fetchTOC(heritageId);
}

Ваш компонент :

ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    // get your parameter value
    map(paramMap => paramMap.get('heritageId')),

    // switch it to a new observable, according to heritageId value
    switchMap((heritageId: string | undefined | null) => herigateId 
      ? this.heritageTextsService.getTOCHeritageText(heritageId)
      : of({}))
  ).subscribe((response: any) => 
      this.loadedHeritagetextTOC = Object.values(response));

}