Angular 6调用.NET Core API获数据后表格显示空白求助

看起来你已经确认API能正常返回数据，但前端表格就是没内容，我帮你梳理几个最可能的原因和对应的修复方案：

1. 异步数据加载的时机与变化检测问题 #

你的DoctorsServiceService里的getDoctors()是异步获取数据，但只是内部给list赋值，既没有确保组件调用了这个方法，也没通知Angular数据已更新，这会导致表格初始化时数据源还是空的。

修复步骤： #

• 先在组件的ngOnInit生命周期钩子中调用服务的getDoctors()，确保数据开始加载：

export class YourDoctorComponent implements OnInit {
  constructor(public service: DoctorsServiceService) {}

  ngOnInit(): void {
    // 调用方法触发数据获取
    this.service.getDoctors();
  }
}

• 更推荐的方式是把服务方法改成返回Observable，配合Angular的async管道使用，这样能自动处理异步数据和变化检测：

// 服务中修改getDoctors方法
getDoctors(): Observable<DoctorVM[]> {
  return this.http.get<DoctorVM[]>(`${this.rootUrl}Doctors`);
}

// 组件类中定义可观察对象
doctors$: Observable<DoctorVM[]>;

ngOnInit(): void {
  this.doctors$ = this.service.getDoctors();
}

// HTML中改用async管道绑定数据源
<table class="table table-striped" [mfData]="doctors$ | async" #mf="mfDataTable" [mfRowsOnPage]="5">

2. 字段名大小写不匹配问题 #

.NET Core默认的JSON序列化是驼峰命名（比如name、gender），但你的Angular接口DoctorVM里的属性是Pascal命名（Name、Gender），这会导致API返回的字段和前端属性无法匹配，item.Name等取值都是undefined，表格自然显示空白。

修复方法： #

• 方案一：修改Angular的DoctorVM接口，属性改成和API返回一致的驼峰命名：

export interface DoctorVM {
  name: string;
  gender: string;
  specialities: string;
  averageRating: number;
}

• 方案二：在.NET Core API中关闭驼峰序列化，保持Pascal命名：

// 在Program.cs中配置
builder.Services.AddControllers()
  .AddJsonOptions(options =>
  {
    options.JsonSerializerOptions.PropertyNamingPolicy = null;
  });

3. mf-data-table的数据源更新检测问题 #

如果坚持使用原来的Promise赋值方式，可能因为数组引用未改变（只是内部元素更新），导致mf-data-table没检测到数据源变化。可以通过重新创建数组引用来触发检测：

// 服务中修改getDoctors方法
getDoctors(){
  this.http.get(this.rootUrl+"Doctors").toPromise()
    .then(res => {
      // 解构原数组创建新引用，触发变化检测
      this.list = [...res as DoctorVM[]];
    });
}

最后建议打开浏览器控制台检查有没有报错，比如是否忘记在模块中导入MfDataTableModule，这类基础配置错误也会导致表格无法正常渲染。

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