HttpClientModule返回空数组

Question

我想使用HttpClientModule来访问Post的Array。 我只是在学习Angular，所以有人可以向我解释为什么这是错误的

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HatedPostListComponent } from './hated-post-list/hated-post-list.component';
import { HatedAboutUsComponent } from './hated-about-us/hated-about-us.component';
import { HatedLoginComponent } from './hated-login/hated-login.component';
import { DataService } from './services/data.service';

@NgModule({
  declarations: [
    AppComponent,
    HatedPostListComponent,
    HatedAboutUsComponent,
    HatedLoginComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './services/data.service';
import { Post } from './models/user.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Frontend';
  constructor (private _svc: DataService) {
    console.log('Data in component' + this._svc.data);
  }
  getDate(): Array<Post> {
    return this._svc.data;
  }
}

数据服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Post } from '../models/user.model';

@Injectable()
export class DataService {
  baseURL: string;
  data: Array<Post> = [];
  constructor(private _http: HttpClient) {
    this.baseURL = 'http://localhost:5000/Posts?from=0&number=10';

  }
  getDate() {
    this._http.get<Array<Post>>(this.baseURL)
    .subscribe(response => {
      this.data = response;
      console.log('Subcribed data:' + this.data);
      console.log('Subcribed response:' + response);
    }
  );
  console.log('Data after subcribe:' + this.data);
  }
}

这就是我得到的结果当我subcribe（）一切都很好时，但是之后我的数据为空

Answer 1

您需要调用该服务，并订阅不在该服务中的组件。

将您的服务代码更改为

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

在你的组件中

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

Answer 2

将您的实现更改为跟随您将获得预期的结果。

您的组件：

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

您的服务：

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

这应该工作。 逻辑问题是您只是在监听服务中数据的当前值。 如果该时间点服务处于[]位置，那么从API接收数据后，除非您订阅该更改，否则不会通知您组件更改。