如何从 asp.net core webapi 获取数据到连接到数据库的 angular 11.0.0。我试图这样做，但它返回空记录

Posted 2023-02-15

【中文标题】如何从 asp.net core webapi 获取数据到连接到数据库的 angular 11.0.0。我试图这样做，但它返回空记录

【英文标题】：How can I get data from asp.net core webapi to angular 11.0.0 which is connected to database. I tried to do it but it returns empty records

【发布时间】：2021-11-26 14:14:11

【问题描述】：

这会从连接到 Microsoft SQL Server 的 asp.net core webapi 获取数据。我正在尝试获取，但它返回列表中未定义的记录

    This is Get method:
    
    refreshList()
        this.http.get(this.baseURL).toPromise()
            .then(res => this.list = res as PaymentDetail[]);
    
    
    this is the way to make it accessible to html page:
    constructor(public service : PaymentDetailService)  
    
    ngOnInit(): void 
    
        this.service.refreshList();
    
    
    

这是我在前端显示的方式：

    <div class=col-md-6>
        <table class="table">
          <thead class="thead-light">
            <tr>
              <th>Card Owner</th>
              <th>Card Number</th>
              <th>Exp Date</th>
              <th></th>
    
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let pd of service.list">
              <td>pd.CardHolder</td>
              <td>pd.CardNumber</td>
              <td>pd.ExpirationdDate</td>
    
              <td>
                <i class="far fa-trash-alt fa-lg text-danger"></i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
     

【问题讨论】：

在您浏览器的调试工具中，在网络选项卡上，当发出 AJAX 请求时，服务器的实际响应是什么？

请求得到 200 响应，因此它正确获取数据但它没有显示在前端

您好，您可以分享问题的回复数据吗？并完成PaymentDetail的代码？

嗨@OsamaKuhail，我的回答是否帮助您解决了问题？如果是这样，你能接受作为答案吗？如果没有，你能跟进让我知道吗？参考：How to accept as answer。谢谢。

【参考方案1】：

响应数据是驼峰格式，所以你需要修改下面的代码：

<tr *ngFor="let pd of service.list">
  <td>pd.cardHolder</td>
  <td>pd.cardNumber</td>
  <td>pd.expirationdDate</td>

  <td>
    <i class="far fa-trash-alt fa-lg text-danger"></i>
  </td>
</tr>