angular - asp.net core angular 和 ng2-smart-table 从数据库中获取数据

Question

朋友们。我是学习 asp.net 核心和角度的新手。我使用 Angular 6。我想使用 ng2-smart-table 从 mssql 数据库中输出一个表。如何编写数据和 CRUD 操作的输出函数。请帮我。

我的代码

这是我的控制器

using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using WebApplication12.Models;

namespace WebApplication12.Controllers
{
    [Route("api/otchets")]
    public class OtchetController : Controller
    {
        web_celContext db;

        public OtchetController(web_celContext context)
        {
            db = context;

        }
        [HttpGet]
        public IEnumerable<Otchet> Get()
        {
            return db.Otchet.ToList();
        }

        [HttpGet("{id}")]
        public Otchet Get(int id)
        {
            Otchet otchet = db.Otchet.FirstOrDefault(x => x.Id == id);
            return otchet;
        }




        [HttpPost]
        public IActionResult Post([FromBody]Otchet otchet)
        {
            if (ModelState.IsValid)
            {
                db.Otchet.Add(otchet);
                db.SaveChanges();
                return Ok(otchet);
            }
            return BadRequest(ModelState);
        }

        [HttpPut("{id}")]
        public IActionResult Put(int id, [FromBody]Otchet otchet)
        {
            if (ModelState.IsValid)
            {
                db.Update(otchet);
                db.SaveChanges();
                return Ok(otchet);
            }
            return BadRequest(ModelState);
        }

        [HttpDelete("{id}")]
        public IActionResult Delete(int id)
        {
            Otchet otchet = db.Otchet.FirstOrDefault(x => x.Id == id);
            if (otchet != null)
            {
                db.Otchet.Remove(otchet);
                db.SaveChanges();
            }
            return Ok(otchet);
        }
    }
}

这是我的模特

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication12.Models
{
    public class Otchet
    {
        public int Id { get; set; }
        public string Doljnost { get; set; }

        public string Familiya { get; set; }
        public string Imya { get; set; }
        public string Onchestvo { get; set; }
        public string Veha { get; set; }
        public decimal Ves { get; set; }

        public string Fact { get; set; }

    }
}

这是 home1.ts

export class Otchet {
  constructor(
    public id?: number,
    public Doljnost?: string,
    public Familiya?: string,
    public Imya?: string,
    public Onchestvo?: string,
    public Veha?: string,
    public Fact?: string,  
    public Ves?: number) { }
}

它是 data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Otchet } from './home1';

@Injectable()
export class DataService {

  private url = "/api/otchets";

  constructor(private http: HttpClient) {
  }

  getOtchets() {
    return this.http.get(this.url);
  }


  createOtchet(otchet: Otchet) {
    return this.http.post(this.url, otchet);
  }



 updateOtchet(otchet: Otchet) {

    return this.http.put(this.url + '/' + otchet.id, otchet);
  }

  deleteOtchet(id: number) {
    return this.http.delete(this.url + '/' + id);
  }
}

它是 home1.component.ts

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

@Component({
  selector: 'app-home1',
  templateUrl: './home1.component.html',
  providers: [DataService]
})

export class Home1Component implements OnInit {

  otchet: Otchet = new Otchet();   // изменяемый товар
  otchets: Otchet[];
  //tableMode: boolean = true;   

  settings = {
    columns: {
      id: {
        title: 'id',
      },

      Ves: {
        title: 'Ves',
      },

    },
  };

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.loadOtchets(); 

  }

  loadOtchets() {
    this.dataService.getOtchets()
      .subscribe((data: Otchet[]) => this.otchets = data);
  }
}

它是 home1.component.html

<ng2-smart-table [settings]="settings" [source]="otchets"></ng2-smart-table>

请帮我。

标签： angularasp.net-core