Angular8 http and services missunderstand

Question

我在这里是因为我不明白 Http 是如何在角度中工作的。我会在我的网站上创建一个"新闻"线程。为此，我在我的角度应用程序中创建了一个调用.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);
}
}

在浏览器控制台中，我得到这个： 控制台屏幕

也许我忘记了代码中的某些内容，或者我不知道是什么。

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

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