Возникла проблема с получением сервисных данных в компонент

Question

Я работаю над проектом, в котором ->

**

1.

** Я создал файл службы новостей.service.ts, (код ниже) **

2.

** В сервисе я создал функцию throwData (), которая возвращает данные сервиса

import { Injectable } from '@angular/core';
import { Component, OnInit  } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class NewsService implements OnInit {

  Data: any = [];

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {

    console.log('f: ' );
    this.http.get('https://newsapi.org/v2/top-headlines?sources=google-news-in&apiKey=5a43238c7827436b9aac37e85583b74a').subscribe(data => {
      this.Data = data['articles'];
      console.log('from service = ' + this.Data[0] );
    });

  }

  throwData(): any {
    return this.Data;
  }
}

**

3.

** Я создал файл компонента, который собирается получать данные из сервиса, который я пытался использовать с кодом ниже

файл component.ts

import { Component, OnInit } from '@angular/core';
import {NewsService} from '../service/news.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  newData: any = [];

  constructor(private _NewsService: NewsService ) { }

  ngOnInit() {

   this.newData = this._NewsService.throwData();

  }

}

**

4.

** СозданоHTML-файл для отображения данных в браузере component.html file

<div class="container">
  <div class="row">
    <div class="col-md-9 each-blog" *ngFor="let item of newData; let i = index"    style="margin-top: 17px ; background-color: #e3e0ef ;  border-left: 5px solid #3d7e9a; ; cursor: pointer;">
     <div>
      <div class="col-md-3">
<img class="img" src="{{item.urlToImage}}" />
      </div>
      <div class="col-md-9">
<a href="{{item.url}}" target="_blank"  style="margin-top:0px">{{item.title}}</a>
<p>{{item.content}}</p> 
      </div>
      </div>
      </div>

    <div class="col-md-3"></div>
  </div>
</div>

Но проблема в том, что я не могу отобразить данные в своем браузере

Answer 1

Используйте следующий код в сервисе, просто используйте http-инъекцию для выполнения запроса, который он собирается вернуть наблюдаемой, а затем просто в вашем компоненте просто подпишитесь на эту наблюдаемую и все.

@Injectable({
  providedIn: 'root'
})
export class NewsService {

  constructor(private http: HttpClient) {
  }
  fetchDataFromServer(){
      this.http.get('https://newsapi.org/v2/top-headlines?sources=google-news- 
     in&apiKey=5a43238c7827436b9aac37e85583b74a')\
  }
}

Component.ts

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  newData$: Observable<any[]>;

  constructor(private _NewsService: NewsService ) { }

  ngOnInit() {

   this.newData$ = this._NewsService.fetchDataFromServer();

  }

}

Затем в шаблоне HTML используйте эту наблюдаемую для отображения информации

<div class="col-md-9 each-blog" *ngFor="let item of newData$ | async">
</div> 

Answer 2

В вашем коде много неправильных понятий.

• Способ выполнения запроса в службе с помощью ngOnInit службы
• Способ предоставления данных с помощью функции throwData

Я рекомендую вам прочитать документацию об услугах на английском языке.

При этом позвольте мне попытаться помочь вам:

Ваша служба должна выглядеть примерно так:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class NewsService {
  data: any[];

  constructor(private _http: HttpClient) {}

  getData(): Observable<any[]> {
    return !this.data
      ? this._http
          .get(
            'https://newsapi.org/v2/top-headlines?sources=google-news-in&apiKey=5a43238c7827436b9aac37e85583b74a'
          )
          .pipe(
            switchMap(data => {
              this.data = data['articles'];
              return this.data;
            })
          )
      : of(this.data);
  }
}

Вместо извлечения данных при инициализации создайте функцию, которая запрашивает данные, если данные не определены, или возвращает их, если они уже есть.

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

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../service/news.service';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  newData: any[];

  constructor(private _NewsService: NewsService ) { }

  ngOnInit() {
   this._NewsService.getData().subscribe(data => this.newData = data);
  }
}

Теперь вы просто подписываетесь на заметку, которую служба возвращает в компоненте.

Последнее изменение в вашем HTML - просто добавьте ngIf перед итерацией по массиву

<div class="container">
  <div class="row">
    <div class="col-md-9 each-blog" *ngIf="newData" *ngFor="let item of newData; let i = index"    style="margin-top: 17px ; background-color: #e3e0ef ;  border-left: 5px solid #3d7e9a; ; cursor: pointer;">
     <div>
      <div class="col-md-3">
<img class="img" src="{{item.urlToImage}}" />
      </div>
      <div class="col-md-9">
<a href="{{item.url}}" target="_blank"  style="margin-top:0px">{{item.title}}</a>
<p>{{item.content}}</p> 
      </div>
      </div>
      </div>

    <div class="col-md-3"></div>
  </div>
</div>

Я не проверял это, но это должно сработать или, по крайней мере, помочь вам найти решение.Приветствия.