Question

我正在使用TypeScript学习Angular 2。到目前为止，我已经编写了一些 API服务，它使用 HTTP get 方法使用observables向我提供json数据。一切正常，我可以在我的视图中使用数据，我也可以使用我的组件中的数据，但仅在我订阅到getData（）方法时。

为什么这样以及我有什么其他可能性使对象数组可用于组件中的所有方法以便于迭代和管理？

示例组件：

export class SomeComponent implements OnInit {

  public someData: DataObject[];

  public constructor(private service: SomeService) {}

  public ngOnInit(): void {
    this.loadData();
    this.useData();
  }

  private loadData(): void {
    this.service.getData().subscribe(data=> {
      this.someData = data;

      this.someData.forEach(dataObject => {
        // this works fine
      });
    });
  }

  private useData(): void {
    this.someData.forEach(dataObject => {
      // dataObject is (of type?) undefined, why?
    });
  }

}

Answer 1

这是因为http调用是异步的。您的this.useData();不会等待this.loadData();完成。这应该有效：

  private loadData(): void {
    this.service.getData().subscribe(data=> {
      this.someData = data;

      this.useData();
    });
  }

Angular 2 TS对象数组仅在订阅服务时定义

1 个答案: