Javascript HttpClientModule返回空数组

我想使用HttpClientModule来获取access Post的阵列。 我只是在学习角度，有人能解释一下为什么这是错误的吗

app.module.ts

app.component.ts

从'@angular/core'导入{Component}；
从“./services/data.service”导入{DataService}；
从“./models/user.model”导入{Post}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
标题=‘前端’；
构造函数（私有的_svc:DataService）{
console.log（'组件中的数据'+此._svc.Data）；
}
getDate（）：数组{
返回此。_svc.data；
}
}

data.service.ts

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“../models/user.model”导入{Post}；
@可注射（）
导出类数据服务{
baseURL：字符串；
数据：数组=[]；
构造函数（私有的http:HttpClient）{
此.baseURL=http://localhost:5000/Posts?from=0&number=10';
}
getDate（）{
这个
当我subcribe（）时，一切正常，但之后我的数据为空
您需要调用该服务并在您的组件中订阅，而不是在该服务中

将您的服务代码更改为

getDate() {
   return this._http.get<Array<Post>>(this.baseURL);
}

getDate（）{
返回此。_http.get（this.baseURL）；
}

在您的组件中

 getDate(): Array<Post> {
    this._svc.getDate().subscribe(
      res => {
        console.log(res);       
      },
      err => console.log(err)
    );
  }

getDate（）：数组{
这是。_svc.getDate（）。订阅(
res=>{
控制台日志（res）；
},
err=>console.log（err）
);
}
将您的实现更改为以下，您将获得预期的结果

您的组件：

getDate(){
  this._svc.getDate().subscribe((res)=> {
    console.log(res)
  });
}

您的服务：

getDate() {
  return this._http.get(this.baseURL);
}

这应该是可行的。您的逻辑问题是您只是在侦听来自服务的数据的当前值。当该时间点服务持有[]时，从API接收数据后，您的组件不会收到更改通知，除非您订阅它。
只需移动
数据：数组=[]；
和
。订阅（响应=>{/…
也在组件中，而不是在服务中。不要在服务中订阅，在组件中订阅。http请求正在异步发生。您的控制台日志（
console.log（'Data after subcribe:'+this.Data）；
）发生在异步代码之外，因此，这就是为什么您看到在其他日志之前登录到控制台的日志可能与此目的重复的原因？
.pipe（map（res=>res））
这似乎不需要。可能是因为您最初的答案只是“你需要调用服务并在你的组件中订阅，而不是在服务中。”哈哈，我明白了，但每个人都需要时间更新完整答案：）
 getDate(): Array<Post> {
    this._svc.getDate().subscribe(
      res => {
        console.log(res);       
      },
      err => console.log(err)
    );
  }

getDate(){
  this._svc.getDate().subscribe((res)=> {
    console.log(res)
  });
}

getDate() {
  return this._http.get(this.baseURL);
}