Angular 引用使用HTTP服务异步初始化的对象

我有一个类，它包含一个名为LearningElementDTO的对象数组，该对象在ngOnInit（）方法上用observable异步初始化。 我遇到的问题是，当我尝试在加载组件时引用此数组时，出现了错误： 无法读取未定义的属性“0”

这里的问题是，我在初始化对象LearningElementDTO[0]之前将其引用

  private learningElements: LearningElementDTO[];

  constructor(private service: LearningService) { }

  ngOnInit() {
    this.loadData();

    // here is where the undefined problem happens 
    console.log(this.learningElements[0].name);
  }
  private loadData(): void {
    this.service.getLearningElements().subscribe(
      (reponse: any) => {
        this.learningElements = reponse;
      }
    );
  }
}

---

是否有任何解决方法可以避免引用以相同方式初始化的对象？

您可以使用

管道
：

private learningElements: LearningElementDTO[];

constructor(private service: LearningService) { }

ngOnInit() {
    this.loadData().subscribe(reponse => {
      console.log(this.learningElements[0].name);
    });
}

private loadData(): Observable<LearningElementDTO[]>{
    return this.service.getLearningElements().pipe(
      map((reponse: any) => {
        this.learningElements = reponse;
        return response;
      })
     );
  }
}

private learningElements:LearningElementDTO[]；
构造函数（私有服务：LearningService）{}
恩戈尼尼特（）{
this.loadData（）.subscribe（response=>{
console.log（this.learningElements[0].name）；
});
}
私有loadData（）：可观察{
返回此.service.getLearningElements（）管道(
地图（（回复：任意）=>{
this.learningElements=响应；
返回响应；
})
);
}
}
您可以为此使用
管道
：

private learningElements: LearningElementDTO[];

constructor(private service: LearningService) { }

ngOnInit() {
    this.loadData().subscribe(reponse => {
      console.log(this.learningElements[0].name);
    });
}

private loadData(): Observable<LearningElementDTO[]>{
    return this.service.getLearningElements().pipe(
      map((reponse: any) => {
        this.learningElements = reponse;
        return response;
      })
     );
  }
}

private learningElements:LearningElementDTO[]；
构造函数（私有服务：LearningService）{}
恩戈尼尼特（）{
this.loadData（）.subscribe（response=>{
console.log（this.learningElements[0].name）；
});
}
私有loadData（）：可观察{
返回此.service.getLearningElements（）管道(
地图（（回复：任意）=>{
this.learningElements=响应；
返回响应；
})
);
}
}
执行
控制台.log
时，响应尚未返回。将服务器响应分配给本地变量this.learningElements后，需要将此代码移到
subscribe
函数中

this.service
    .getLearningElements()
    .subscribe(response => {
        this.learningElements = response;
        console.log(this.learningElements[0].name);
    });

执行
console.log
时，响应尚未返回。将服务器响应分配给本地变量this.learningElements后，需要将此代码移到
subscribe
函数中

this.service
    .getLearningElements()
    .subscribe(response => {
        this.learningElements = response;
        console.log(this.learningElements[0].name);
    });

你能解释一下为什么我应该返回一个Observable，因为函数只有将数据加载到LearningElementDTO[]的任务吗？@redd77
this.service.getLearningElements（）.subscribe（）是一个
异步
操作，因此，您在
ngOnInit
中启动它，但在尝试
console.log（this.learningElements[0].name）之前没有等待它完成。在这种情况下，我们选择返回一个可观察的，这样我们基本上可以在这个过程完成时收到通知。主要的一点是，您之前没有等待
async
进程。您能解释一下为什么我要返回一个observeable，因为函数的任务只是将数据加载到LearningElementDTO[]中吗？@redd77
this.service.getLearningElements（）.subscribe（）
是一个
async
操作，因此，您在
ngOnInit
中启动它，但在尝试
console.log（this.learningElements[0].name）之前没有等待它完成。在这种情况下，我们选择返回一个可观察的，这样我们基本上可以在这个过程完成时收到通知。主要的一点是，您以前没有等待
async
进程。