时间戳

首页 > 解决方案 > 如何访问函数之外的数据 - Angular/Javascript

javascript - 如何访问函数之外的数据 - Angular/Javascript

问题描述

我正在从另一个文件（组件）加载数据，并且当我从函数中对其进行控制台时，因此在事件发生后它可以工作：

  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)

 } 
 }

在参与服务中，我像这样进行 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))

      });

因此，使用 observables 的另一个调用示例（我可能会丢失）在这里：

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

我想要在 UI 中显示的数组。

我能做些什么？

标签： javascriptangular

解决方案

您需要一种让您的组件知道 API 调用何时完成的方法。为此，您可以从服务返回一个 observable 并在组件中订阅它。

例如，在您的服务中，您可以拥有：

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;
    });
}

推荐阅读