javascript - 使用 Angular 从 API 访问数据(格式错误？)

Question

我尝试从 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>
  ) {  }
}

FirstArray 类:

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

SecondArray 类:

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

我的 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', []))
  );
}

component.ts 文件:

ngOnInit() {
  this.getAllDependencies();
  console.log("allDependencies:",this.allDependencies); 
}

allDependencies: Dependencies[];

getAllDependencies(): void {
  this.DependenciesService.getAllDependencies()
  .subscribe(allDependencies => this.allDependencies = allDependencies);
}

当我在组件文件中尝试 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', []))
  );
}

我的问题:如何从我的组件文件中访问这些数据？我想我的数据结构中某处遗漏了一些东西，或者我遇到了与 Typescript 相关的错误，但我不确定。

Answer 1

您遇到的最大问题是，在您的组件中，调用服务的方法是 void并且不返回任何东西......

它并没有真正增加任何值(value)，所以删除它并像这样访问数据:

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

根据您的评论更新:

从 getAllDependencies(): void 更改您的方法至 getAllDependencies(): Observable<Dependencies[]>并在ngOnOnit内调用

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

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