如何将数据库数据从C＃.NET Core后端传递到Typescript Angular前端？

问题描述

我已经通过Visual Studio创建新项目功能，创建了一个具有Angular前端的ASP.NET Core Web应用程序。我还创建了一个sql Server实例。

我能够通过getData()方法将C＃代码中的数据从数据库中获取为数据类型，并且我已经在Angular中创建了一个匹配的数据类型，并创建了示例数据来填充它。我有html页面在图表中显示此示例数据。但是，我苦苦挣扎的是如何调用C＃方法来获取数据库数据。

根据我的研究，我不能只是从js / Angular调用getData() C＃方法。我假设该过程是Angular打字稿代码向服务器发送一个http请求，服务器调用C＃方法，该方法获取数据库数据，然后服务器将其发送回Angular。

我很困惑的是，Angular到底将代码发送到什么地方，以及如何调用C＃getData()方法，而不仅仅是通过“服务器”的一般概念？

感谢您的帮助和时间。

解决方法

在像您这样的场景中，我使用Web Api后端策略。 在您的后端中，您需要一个控制器，该控制器处理您的前端（角度）正在发送的请求并发送回数据。

namespace yourproject.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class backendController : ControllerBase
    {            
    [HttpGet]
        public ActionResult<IQueryable<yourType>> GetData()
        {
          List<yourType> data = your getdata-Method in the backend
          return new ActionResult<IQueryable<yourType>>(result.AsQueryable());
            
        }
    }
}

在Angular中，您现在可以“使用”此Web API端点以获取数据。 在ts文件的构造函数中添加HttpClient：

  constructor(private http: HttpClient)

并使用其通用的get方法获取数据：

 this.http.get<yourType[]>(url + '/GetData/')
    .subscribe(data => this.yourDataInAngular = data)

要使Web api运行，您还需要做更多的事情，但这对于解决这个问题将有很多帮助。 这是针对它的Microsoft教程： Create a web api with ASP.net core