如何在Angular 4中展示ASP.NET Core API返回的匿名DataTable数据

嘿，这个问题我之前也碰到过！你的ASP.NET Core API返回的是DataTable序列化后的动态结构，Angular 4没法直接用强类型ViewModel，但咱们用动态对象完全能搞定，一步步来：

首先，你当前的API代码直接返回DataTable，ASP.NET Core默认会把它序列化成对象数组，比如你的DataTable有Id和UserName两列，返回的JSON会是这样：

[
  {"Id": 1, "UserName": "Alice"},
  {"Id": 2, "UserName": "Bob"}
]

如果你的序列化方式特殊（比如返回包含Columns和Rows的结构），后面组件里的处理要稍微调整，不过先按最常见的情况来。

1. 创建数据服务（DataService） #

先写一个服务来调用你的API，用HttpClient发送POST请求，返回Observable<any[]>来接收动态数据：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
  // 替换成你实际的API路由
  private apiEndpoint = '/api/yourControllerName/display';

  constructor(private http: HttpClient) { }

  fetchDataById(id: number): Observable<any[]> {
    const requestBody = { id: id };
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<any[]>(this.apiEndpoint, requestBody, { headers });
  }
}

2. 组件中获取并处理数据 #

在展示数据的组件里，调用服务拿到数据，同时提取列名（方便模板动态渲染）：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data-display',
  templateUrl: './data-display.component.html'
})
export class DataDisplayComponent implements OnInit {
  tableRows: any[] = [];
  columnNames: string[] = [];

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    // 替换成你需要传入的id
    this.loadData(123);
  }

  loadData(id: number): void {
    this.dataService.fetchDataById(id).subscribe(
      response => {
        this.tableRows = response;
        // 如果有数据，提取第一行的键作为列名
        if (this.tableRows.length > 0) {
          this.columnNames = Object.keys(this.tableRows[0]);
        }
      },
      error => {
        console.error('加载数据出错:', error);
      }
    );
  }
}

3. 模板动态渲染表格 #

因为列名和数据都是动态的，用*ngFor遍历列和行来生成表格：

<!-- 有数据时展示表格 -->
<div *ngIf="tableRows.length > 0">
  <table style="border-collapse: collapse; width: 100%;">
    <thead>
      <tr>
        <th *ngFor="let col of columnNames" style="border: 1px solid #ccc; padding: 8px;">
          {{ col }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of tableRows">
        <td *ngFor="let col of columnNames" style="border: 1px solid #ccc; padding: 8px;">
          {{ row[col] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 无数据时提示 -->
<div *ngIf="tableRows.length === 0">
  暂无数据可展示
</div>

• 确保你的Angular项目已经导入了HttpClientModule：在AppModule的imports数组里添加HttpClientModule，否则HttpClient会用不了。
• 如果API返回的是{ Columns: [...], Rows: [...] }这种结构（比如某些自定义序列化），调整组件里的处理逻辑：

  response => {
    // 假设Columns数组里的对象有ColumnName字段
    this.columnNames = response.Columns.map(col => col.ColumnName);
    this.tableRows = response.Rows;
  }
  

• 关于类型安全：如果后续API返回的结构固定了，你可以再定义对应的接口（强类型）来替换any，但现阶段用any是最灵活的解决方案。

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