使用HttpClient发起GET请求无网络活动无数据展示，问题出在哪里？

• 核心问题1：生命周期钩子名称错误
  Angular 框架约定的 OnInit 生命周期钩子对应的触发方法名为 ngOnInit，你当前代码中定义的 OnInit 方法不属于框架识别的生命周期函数，不会被自动执行，因此 getJsonPosts 从未被调用，自然不会发起网络请求。
  你需要先导入 OnInit 接口并让组件类实现该接口，再修改方法名，修正后的 TypeScript 代码如下：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export class AppComponent implements OnInit {
    
  jsonPosts: any = [];

  constructor(private httpClient: HttpClient) { }

  ngOnInit() {
    this.getJsonPosts();
  }

  getJsonPosts(): void {
    this.httpClient.get("https://jsonplaceholder.typicode.com/posts")
      .subscribe(response => {
        console.log(response);
        this.jsonPosts = response;
      });
  }
}

• 核心问题2：未注册HttpClientModule
  如果修改生命周期钩子后依然没有请求，需要确认你已经在根模块（通常是AppModule）的imports数组中注册了HttpClientModule，否则HttpClient的依赖注入会失败，无法发起网络请求，注册示例如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 可选优化：模板逻辑调整
  你当前把*ngFor指令放在<ul>标签上，会为每一条数据生成一个独立的无序列表，更符合语义的写法是将*ngFor放在<li>标签上，在单个列表下渲染所有数据：

<ul>
  <li *ngFor="let post of jsonPosts">
    <div>{{post.userId}}</div>
    <div>{{post.id}}</div>
    <div>{{post.title}}</div>
    <div>{{post.body}}</div>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者user14932840