Angular 8 http 和服务误解

Question

我来这里是因为我不明白 angular 中的 Http 是如何工作的。我会在我的网站上创建一个 "news" 线程。为此，我在我的 angular 应用程序中创建了一个调用 .net 核心 Web API 的服务。另外，我会在我的线程中添加一个分页（我想在页面上按 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);
  }
}

在浏览器控制台中，我得到了这个： console screen

也许我在代码中忘记了什么或者我不知道是什么。

有人可以帮助我实现我的目标吗？我想了解如何继续为我的新闻制作有效的分页。

Answer 1

您应该添加

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 检索数据）。希望这有帮助

Angular 8 http 和服务误解

Angular8 http and services missunderstand

angular-http

angular-services

angular8