Angular8 http и службы неправильно понимают - PullRequest
Новая
       47

Angular8 http и службы неправильно понимают

0 голосов
/ 23 сентября 2019

Я здесь, потому что я не понимаю, как работает http в angular.Я хотел бы создать ветку "новости" на моем сайте.Для этого я создал службу в своем угловом приложении, которая вызывает основной веб-API .net.Кроме того, я бы добавил paginate в свою ветку (я хочу отображать новости на 5 на странице).Я могу получить свои ценности, это не моя проблема здесь.Но чтобы создать страницу, мне нужно иметь значения для подсчета количества страниц.

Я пытался добавить код для создания страницы (количество страниц, количество элементов ...), но всегда получаю 0к этим значениям, и мой массив новостей заполняется после onInit ().Это то, чего я не понимаю.

Это мой компонент: 

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  title = 'News';
  news = [];
  displayed = [];
  numberOfPages = 0;

  constructor(private newsService: NewsService) { }

  ngOnInit() {
    // I don't really understand these lines (mainly the subscribe part)
    this.newsService.getAllNews().subscribe((data) => {
      this.news = Array.from(Object.keys(data), k => data[k]);
      // this console.log appears after the onInit(), why ?
      console.log(this.news);
    });

    this.numberOfPages = this.news.length / 5; // Get 0 here, why ?
  }

}

Мой сервис: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class NewsService {
  private finalData = [];
  private apiUrl = 'https://localhost:5001/api/v1/posts';

  constructor(private http: HttpClient) { }

  getAllNews() {
    return this.http.get(this.apiUrl);
  }
}

В консоли браузера я получаю следующее: экран консоли

Может быть, я что-то забыл в своем коде или не знаю, что именно.

Кто-то может помочь мне достичь моей цели?Я хочу понять, как начать работу над выпуском моих новостей.

1 Ответ

0 голосов
/ 23 сентября 2019

Вы должны добавить 

this.numberOfPages = this.news.length / 5;

внутри подписки 

this.newsService.getAllNews().subscribe((data) => {
      this.news = Array.from(Object.keys(data), k => data[k]);
      // this console.log appears after the onInit(), why ?
      console.log(this.news);
    });

примерно так: 

this.newsService.getAllNews().subscribe((data) => {
      this.news = Array.from(Object.keys(data), k => data[k]);
      // this console.log appears after the onInit(), why ?
      console.log(this.news);
      this.numberOfPages = this.news.length / 5;
    });

Я предполагаю, что при попытке инициализировать this.numberOfPages this.news.length еще не установлен (данные еще не получены из API).Надеюсь, это поможет

...