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接收數據后，除非您訂閱該更改，否則不會通知您組件更改。