HttpClientModule возвращает пустой массив

Question

Я хочу использовать HttpClientModule для получения доступа к массиву Post.Я только изучаю 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;
  }
}

data.service.ts

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);
  }
}

Это то, что я результат Когда я подписываюсь ()все ок, но после этого мои данные пусты

Answer 1

Измените вашу реализацию на следующую, чтобы получить ожидаемый результат.

Ваш компонент:

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

Ваш сервис:

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

Это должно работать. Проблема с вашей логикой заключается в том, что вы просто слушаете текущее значение данных из сервиса. где этот момент времени обслуживается [], после получения данных от API ваш компонент не уведомляется об изменении, если вы не подписаны на него.

Answer 2

Вам необходимо позвонить в службу и подписаться на свой компонент, а не на службу.

Измените код услуги на,

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

и в вашем компоненте

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