Spring WebFlux后端单条Member数据在Angular前端展示问题排查

一、修复*ngFor遍历单个对象的错误 #

ngFor指令仅适用于数组、Set等可迭代对象，而你的member是单个Member实例，而非集合，直接使用ngFor会触发类型不匹配错误。

修改member-details.component.html #

移除*ngFor，直接绑定单个对象的属性，同时修正表格结构（数据行应放在<tbody>而非<thead>）：

<div class="container">
    <h2>Member Details</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>MemberId</th>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{member.memberId}}</td>
                <td>{{member.firstName}}</td>
                <td>{{member.lastName}}</td>
                <td>{{member.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

二、修复memberId未正确获取的问题 #

当前路由未定义参数传递规则，组件也未从路由中提取memberId，导致请求时memberId为undefined，无法正常调用后端接口。

步骤1：修改app-routing.module.ts，添加路由参数 #

const routes: Routes = [
  {path:'get-member', component:MemberListComponent},
  {path:'view-member/:memberId', component:MemberDetailsComponent} // 新增:memberId作为路由参数
];

步骤2：修改member-details.component.ts，通过ActivatedRoute获取参数 #

替换Router为ActivatedRoute来提取当前路由的参数：

import { ActivatedRoute } from '@angular/router';

export class MemberDetailsComponent implements OnInit {
  member: Member = new Member();
  memberId: string;

  constructor(
    private memService: MemberService,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.memberId = params.get('memberId')!;
      this.memService.viewMemberDetails(this.memberId).subscribe(data => {
        this.member = data;
        console.log(data);
      });
    });
  }
}

可选优化：增强member-service.ts的类型安全性 #

将返回类型从Observable<any>改为Observable<Member>，提升代码健壮性：

import { Member } from './path-to-your-member-model';

viewMemberDetails(memberId: string): Observable<Member> {
  const url = `http://localhost:8081/viewbill/${memberId}`;
  return this.httpclient.get<Member>(url);
}

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