Javascript 从API访问具有角度的数据（格式错误？）

我试图从API访问的数据格式如下：

{
  “array1”:[
    {"id”:1, ”someProperty”:”A"},
    {"id":2, "someProperty”:”B”}
  ],
  “array2”:[
    {"id”:1, ”anotherProperty”:”foo”, ”lastProperty”:”foo2”},
    {"id":2, "anotherProperty”:”bar”, ”lastProperty”:”bar2”}
  ]                                                                      
}

依赖项类：

import { FirstArray } from './first-array';
import { SecondArray } from './second-array';
export class Dependencies {
  constructor(
    public array1: Array<FirstArray>,
    public array2: Array<SecondArray>
  ) {  }
}

第二个数组类：

export class FirstArray {
  constructor(
    public id: number,
    public someProperty: string
  ) {  }
}

export class SecondArray {
  constructor(
    public id: number,
    public anotherProperty: string,
    public lastProperty: string
  ) {  }
}

My Dependencies service.ts文件：

/** GET all Dependencies from the server */
getAllDependencies (): Observable<Dependencies[]> {
return this.http.get<Dependencies[]>(apiUrl).pipe(
    tap(allDependencies => this.log('fetched allDependencies')),
    catchError(this.handleError('getAllDependencies', []))
  );
}

当我在组件文件中尝试console.log（this.allDependencies）时，结果是未定义的。正确地从API中检索数据—“fetched allDependencies”打印在日志中，通过从服务文件字符串化，我可以很好地打印日志中的Dependencies对象：

/** GET all Dependencies from the server */
getAllDependencies (): Observable<Dependencies[]> {
return this.http.get<Dependencies[]>(apiUrl).pipe(
    tap(allDependencies => this.log(JSON.stringify(allDependencies))),
    catchError(this.handleError('getAllDependencies', []))
  );
}

/**从服务器获取所有依赖项*/
getAllDependencies（）：可观察{
返回这个.http.get（apirl.pipe）(
点击（allDependencies=>this.log（JSON.stringify（allDependencies）），
catchError（this.handleError（'getAllDependencies'，[]））
);
}

---

我的问题：如何从组件文件访问这些数据？我想我的数据结构中有什么地方遗漏了，或者我有一个与Typescript相关的错误，但我不确定。

您遇到的最大问题是，在您的组件中，调用您的服务的方法是

void

，并且不返回任何内容

它实际上并没有增加任何价值，因此请删除它，然后像这样访问数据：

ngOnInit() {
 this.DependenciesService.getAllDependencies()
    .subscribe(allDependencies => {
     this.allDependencies = allDependencies;
     console.log(this.allDependencies); // multi-line with log.
    });    
}

根据您的评论更新：

将方法从

getAllDependencies（）：void

更改为

getAllDependencies（）：observeable

并在

ngoonit

getAllDependencies(): Observable<Dependencies[]> {
    return this.DependenciesService.getAllDependencies();
}

ngOnInit() {
   this.getAllDependencies().subscribe(.....);
}

getAllDependencies（）：可观察{
返回此.DependenciesseService.getAllDependencies（）；
}
恩戈尼尼特（）{
this.getAllDependencies（）.subscribe（…）；
}

该参数名为

allDependencies

，但您正在记录

allLocDependencies

…对不起，这是问题中的一个输入错误。我正在我的代码中记录allDependencies。getAllDependencies方法是异步的，您在订阅时会得到结果。如果您在之前或之后登录，您可能无法获得它。您可以用您的实际代码更新问题吗？只需首先更新问题：这可以在日志中显示所有必要的数据！第二：我再次更新了我的问题-我使用ngOnInit调用getAllDependencies方法，但是allDependencies对象仍然没有定义。你的代码是如何定义所有依赖项的，而我的代码却没有。因为。您的方法无效，服务异步返回数据，因此您的方法可能在返回数据之前完成，因此变量保持未分配状态。直接调用服务方法并删除组件方法

getAllDependencies（）：void

Oh，好的。如果我理解正确，我无法在我的组件文件中使用单独的方法设置变量，因为服务方法是异步的？您可以使用另一种方法按自己的方式进行设置，但返回可观察的，以便您可以订阅它。那么一切都应该起作用。我只是没有看到它增加了价值。我不太熟悉怎么做，你介意带我去/指引我去某个我能读懂它的地方吗？

getAllDependencies(): Observable<Dependencies[]> {
    return this.DependenciesService.getAllDependencies();
}

ngOnInit() {
   this.getAllDependencies().subscribe(.....);
}