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

Posted 2023-03-13

【中文标题】Angular 2 TS 对象数组仅在订阅服务时定义

【英文标题】：Angular 2 TS object array only defined while subscribed to service

【发布时间】：2017-03-13 12:55:20

【问题描述】：

我正在使用 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?
    );
  

【参考方案1】：

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

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

      this.useData();
    );
  

【讨论】：

感谢您的快速回复。我可以以某种方式使 loadData 方法同步吗？我有 2 种方法加载 2 个不同的对象数组，我需要在加载两个数组后立即迭代它们。我不想通过在一个方法中加载它们来混淆它们。

改写：我可以等待并检查要加载的数据以在之后调用我的方法吗？

前段时间我对它进行了快速研究，据我所知，没有办法等待异步函数。您的目的是在回调函数中实现逻辑。您可能想用谷歌搜索看看事情是否发生了变化。

很公平，既然我知道问题所在，我会尝试使用谷歌搜索。谢谢！