Как получить доступ к данным вне функции - Angular / Javascript

Question

Я загружаю данные из другого файла (компонента), и когда я поддерживаю их изнутри функции, чтобы после события это работало:

  updateSub(data) {
  console.log('attempting to print the subsid array' + 
  this.engagementService.orgSubSidNames)
  }

Когда я пытаюсь вызвать вне этого иза пределами области видимости, но в моем ngOnit он утешается пустым:

console.log('attempting to print the subsid array initially' + 
this.engagementService.orgSubSidNames)

Весь код включен в мой ngOnit.Я также включил в свой конструктор engagementService, вот как я к нему обращаюсь:

 export class EngagementFilterComponent implements OnInit {

 constructor(private builder: FormBuilder, public engagementService:
 EngagementService) { }

 ngOnInit(): void {

 console.log('attempting to print the subsid array initially' + 
 this.engagementService.orgSubSidNames)

 } 
 }

В службе Engagement я выполняю http-вызов следующим образом:

    organizationSubsidiaries(sfid: string) {
    const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
    return this.http.get(url).map(res => res.json());
  }

Затем, когда браузерзагруженный, он называется как таковой, и я создаю массив, который я хочу из ответа:

        this.organizationSubsidiaries(id)
      .subscribe(data => {

        let subsidiaryNames = []
        data.forEach(sub => {
          console.log(sub.SubsidiaryName)
          subsidiaryNames.push(sub.SubsidiaryName)
        })
        subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);
        this.orgSubSidNames = subsidiaryNames;
        console.log('data from subsidiaries' + JSON.stringify(this.orgSubSidNames))

      });

Так что пример другого вызова с использованием наблюдаемых (что я мог бы пропустить) здесь:

    allEngagementAreas(): Observable<IBaseEngagement[]> {
    const url = `${this.baseURL}/${ENDPOINTS.engagementAreas}`;
    return this.http.get(url).map(res => res.json() as IBaseEngagement[]);
  }

Массив, который я хочу отобразить в пользовательском интерфейсе.

Что я могу сделать?

Answer 1

Вам нужен способ сообщить компоненту, когда вызов API завершен.Для этого вы можете вернуть наблюдаемое из сервиса и подписать его в компоненте.

Например, в вашем сервисе вы можете иметь:

public getOrgSubsidiaries(id) {
    return this.organizationSubsidiaries(id).map(data => {
        let subsdiaryNames = [];
        // your logic
        return subsdiaryNames;
    });
}

Затем внутри вашего компонента, вы можете сделать:

ngOnInit(): void {
    this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
        this.orgSubsidiaries = data;
    });
}