Angular 8 구성 요소의 데이터 액세스에 대한 이상한 점

xml 파일을 처리하고 인터페이스의 데이터 구조를 반환하는 서비스를 개발 중입니다.
처음에는 서비스가 모든 데이터를 올바르게 반환했다고 생각했지만 특히 구성 요소의 데이터 구조를 읽으려고 할 때 명확하지 않은 점을 깨달았습니다.
이것은 내 서비스입니다.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AppConfig } from 'src/app/app.config';
import { forkJoin, Subscription } from 'rxjs';

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

  private editionUrls = AppConfig.evtSettings.files.editionUrls || [];
  private bibliographicCitations: Array<BibliographicCitation> = [];
  private subscriptions: Array<Subscription> = [];

  constructor(
    private http: HttpClient,
  ) {
  }

  private getHttpCallsOBSStream() {
    return this.editionUrls.map((path) =>  this.http.get(path, { responseType: 'text'}));
  }

  public getBibliographicCitations(): Array<BibliographicCitation> {
    const parser = new DOMParser();
    this.subscriptions.push(forkJoin(this.getHttpCallsOBSStream()).subscribe((responses) => {
      responses.forEach(response => {
        Array.from(parser.parseFromString(response, 'text/xml').getElementsByTagName('bibl')).forEach(citation => {
          if (citation.getElementsByTagName('author').length === 0 &&
              citation.getElementsByTagName('title').length === 0 &&
              citation.getElementsByTagName('date').length === 0) {
            const interfacedCitation: BibliographicCitation = {
              title: citation.textContent.replace(/\s+/g, ' '),
            };
            if (!this.bibliographicCitations.includes(interfacedCitation)) { this.bibliographicCitations.push(interfacedCitation); }
          } else {
            const interfacedCitation: BibliographicCitation = {
              authors: citation.getElementsByTagName('author'),
              title: String(citation.getElementsByTagName('title')[0]).replace(/\s+/g, ' '),
              date: citation.getElementsByTagName('date')[0],
            };
            if (!this.bibliographicCitations.includes(interfacedCitation)) { this.bibliographicCitations.push(interfacedCitation); }
          }
        });
      });
    }));
    return this.bibliographicCitations;
  }
}

export interface BibliographicCitation {
  authors?: HTMLCollectionOf<Element>;
  title: string;
  date?: Element;
}

그리고 이것은 내 구성 요소입니다.

import { Component, AfterViewInit } from '@angular/core';
import { BibliographyParserService } from 'src/app/services/xml-parsers/bibliography-parser.service';

@Component({
  selector: 'evt-bibliography',
  templateUrl: './bibliography.component.html',
  styleUrls: ['./bibliography.component.scss']
})
export class BibliographyComponent implements AfterViewInit{

  constructor(
    public bps: BibliographyParserService,
  ) {
    console.log(this.bps.getBibliographicCitations());         // WORKS, return the correct data structure
    this.bps.getBibliographicCitations().forEach(console.log); // DOESN'T RETURN ANYTHING!
    console.log(this.bps.getBibliographicCitations().length);  // RETURN 0
  }

  ngAfterViewInit() {
    (document.querySelectorAll('.cloosingRood')[0] as HTMLElement).onclick = () => {
      (document.querySelectorAll('.biblSpace')[0] as HTMLElement).style.display = 'none';
    };
  }
}

아주 이상한 것은 그 세 개의 통나무입니다. 우리는 그들 사이에서 다른 것을 볼 수 있습니다.
첫 번째 로그를 사용하면 콘솔에서 전체 데이터 구조를 볼 수 있습니다.
두 번째로는 아무 일도 일어나지 않습니다.
세 번째의 경우 길이는 0과 같으며 첫 번째 로그에 표시된 것처럼 데이터 구조가 가득 차서 사실이 아닙니다 ...!
나는 왜 이러한 기이함을 이해하지 못한다. 각도 문서에서 놓친 것이 있습니까?

추신 : 구성 요소에서 구독을 만들고 싶지 않습니다. 그렇지 않으면 이미 해결했을 것입니다. 나처럼 시각화에서 논리를 분리하고 서비스에서 데이터 구조를 만들고 싶습니다.