如何从数据库获取数据到表Angular 8，C＃，WebApi

如何解决如何从数据库获取数据到表Angular 8，C＃，WebApi

我正在尝试做相对简单的事情，但是我对所有选项感到困惑，需要您的帮助。

我正在尝试从数据库检索信息，将其通过API传递并显示在我在Angular中制作的表中。 想法是将状态为1的所有生产率都放入某个列表。将列表返回到Angular并在表中显示数据。

我知道有很多选择。诚然，我测试过的所有示例都应该在Angular和C＃项目中进行。但是每个项目都不相同，没有一个示例与我的项目结构相符。

这就是我的代码：（我知道很多细节都遗漏了，但这并不完美 所以我需要帮助）

messages.component.html

<table id="customers">
                    <tr>
                        <th>productivity num</th>
                        <th>user ID</th>
                        <th>amount</th>
                        <th>Special comments</th>
                        <th>Accept/reject</th>
                    </tr>
                    <tr *ngFor="let item of productivityList">
                        <td>{{item.ProductivyCode}}</td>
                        <td>{{item.UserCode}}</td>
                        <td>{{item.ProductivityNum}}</td>
                        <td>{{item.Cmment}}</td>
                        <td>
                            <div>
                                <button class="button is-success">accept</button>
                                <button class="button is-danger">reject</button>
                            </div>
                        </td>
                    </tr>
                </table>

messages.component.ts

import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from 'src/app/shared/services/user.service';
import { Productivity } from 'src/app/shared/models/productivity';

@Component({
  selector: 'app-messages',templateUrl: './messages.component.html',styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {

  constructor(private router: Router,private userservice: UserService) { }

  productivityList: Productivity[];

  ngOnInit():void {
   this.getProductivityRequest();
  }

  getProductivityRequest() {
    this.userservice.getProductivityRequest().subscribe((res) => {
      this.productivityList = res;
      if (res)
        console.log("ok")
    },err =>
        console.log("faild")
    );
  }

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable,observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../models/user.model';
import { Productivity } from '../models/productivity';
import { Time } from '@angular/common';
import { stringify } from 'querystring';
//import { read } from 'fs';



@Injectable({
  providedIn: 'root'
})
export class UserService {

  url: string = "https://localhost:44387/api/User/";
  productivityList: Productivity[];

  constructor(private http: HttpClient) { }

  getProductivityRequest() {
    return this.http.get(this.url+'getProductivityRequest');
}

UserController.cs //这是我在C＃中的项目

using BL;
using DTO;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;

namespace WebApiSystem.Controllers
{
    [EnableCors(origins: "http://localhost:4200",headers: "*",methods: "*",SupportsCredentials = true)]
    [RoutePrefix("api/User")]

    public class UserController : ApiController
    {
        [HttpGet]
        [Route("getProductivityRequest")]

        public IHttpActionResult GetProductivityRequest()
        {
            return Ok(UserService.GetProductivityRequest());
        }    

    }
}

UserService.cs

using DAL;
using DTO;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace BL
{
    public class UserService
    {
        public static IQueryable<dynamic> GetProductivityRequest()
        {
            using (Model2 db = new Model2())
            {
                db.Configuration.ProxyCreationEnabled = false;
                db.Configuration.LazyLoadingEnabled = false;
                IQueryable<dynamic> PList = db.ProductivityTbl.Select();//I want to make a condition within the SELECT that only an object whose status 1 will enter the list
                return PList;
            }
        }

    }
}

我希望已经很清楚了，也许您可​​以向我展示如何正确编写代码，并且如果有人有其他想法，例如返回JSON对象，我希望您向我展示如何做到这一点...谢谢！

解决方法

要解决从Angular前端调用Web api时出现的CORS错误，您可以在Web api内Startup类的Configure（）方法中配置行为...

  import java.io.FileWriter;

  public void saveToFile(String data,String filename) {
    try (
      FileWriter fw = new FileWriter(filename)) {
      fw.write(data);
    } catch (Exception e) {
      throw new RuntimeException(e);
    }
  }

,

我试图打开一个新项目，但在那里仍然看不到上面的文件。我尝试手动添加它，但是无法实现该接口（他要我实现一个全新的接口），文件中可能缺少一些代码？

StartUp.cs

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(WebApiSystem.Startup1))]

namespace WebApiSystem
{
    public class Startup1
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application,visit https://go.microsoft.com/fwlink/?LinkID=316888
        }
        public void Configure(IApplicationBuilder app,IWebHostEnvironment env)
        {
            if (env.IsDevelopment()) app.UseDeveloperExceptionPage();

            app.UseCors("AllowAll");

            app.UseStaticFiles();
            app.UseRouting();
            app.UseAuthentication();
            app.UseAuthorization();
        }
    }
}