Блог

Я пытаюсь сделать что-то относительно простое, но меня смущают все варианты, и мне нужна ваша помощь.

Я пытаюсь извлечь информацию из базы данных, передать ее через 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, я был бы рад, если бы вы показали мне, как это сделать … спасибо!

Чтобы устранить ошибку CORS при вызове web api из интерфейса Angular, вы можете настроить поведение в методе Configure() вашего класса Startup в web api…

     public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment()) app.UseDeveloperExceptionPage();

        app.UseCors("AllowAll");

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