Angular CRUD应用数据入库成功但前端列表不显示问题咨询

核心问题1：列表组件未自动拉取最新数据 #

你当前的RequirementListComponent仅在首次初始化的ngOnInit生命周期中调用一次getRequirements接口拉取数据，当你从新增页面跳转回列表页时，如果列表组件已经被缓存，ngOnInit不会重新执行，也就不会拉取新增后的最新数据。
修复方案：
在列表组件中监听路由跳转事件，每次进入列表页都重新拉取数据，修改requirement-list.component.ts：

import { Component, OnInit } from '@angular/core';
import { Requirement } from '../requirement';
import { RequirementService } from '../requirement.service';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

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

  requirements:  Requirement[];

  constructor(private  requirementService:  RequirementService,
    private router: Router) { }

  ngOnInit(): void {
    // 首次初始化拉取数据
    this.getRequirements();
    // 监听路由跳转事件，每次进入列表页都重新拉取数据
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd && event.url === '/requirements')
    ).subscribe(() => {
      this.getRequirements();
    })
  }

  private getRequirements(){
    this.requirementService.getRequirementList().subscribe(data => {
      this.requirements = data;
      // 可添加日志确认接口返回数据是否符合预期
      console.log('拉取到的需求列表：', data);
    }, error => {
      console.error('拉取列表失败：', error);
    })
  }

  updateRequirement(resId: number){
    this.router.navigate(['update-requirement', resId]);
  }

}

核心问题2：文件命名拼写错误 #

你提供的列表模板文件名为requiremnt-list.component.html，少了字母e，与组件中templateUrl配置的requirement-list.component.html不匹配，会导致模板加载失败，修改文件名和组件配置保持一致即可。

核心问题3：服务层接口路径配置错误 #

requirement.service.ts中单个查询接口路径拼接错误：

// 错误写法
private URL3 = "http://localhost:2021/getreq{resId}";
getRequirementByresId(resId: number): Observable<Requirement>{
  return this.httpClient.get<Requirement>(`${this.URL3}/${resId}`);
}

以上写法会生成错误的请求路径：http://localhost:2021/getreq{resId}/xxx，修改为：

// 修正后
private URL3 = "http://localhost:2021/getreq";
getRequirementByresId(resId: number): Observable<Requirement>{
  return this.httpClient.get<Requirement>(`${this.URL3}/${resId}`);
}

其他排查点 #

• 打开浏览器控制台的Network面板，确认getallrequirements接口返回状态为200，且返回的数组字段和Requirement类定义的字段完全匹配（比如后端返回的主键字段是否为resId，如果是id则需要修改字段名对应）
• add-requirement.component.spec.ts中错误引用了AddOfferComponent，这是测试文件不影响生产运行，如有测试需求修改为AddRequirementComponent即可

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