如何从控制器上的数据集获取数据并绑定到表?

时间:2019-01-16 11:36:10

标签: angular typescript

我正在数据集中的控制器上获取数据,并且已经检查了我在服务响应中获取的所有数据。现在,我想将此数据绑定到表中。我该如何实现?

下面的控制器中的功能正在从数据库中获取数据。

public async Task<IHttpActionResult> getTLTeam()
        {
            var jsonString = "";
            TLDashboardDA mgr = new TLDashboardDA();
            string p_projId = "10";
            string p_teamId = "146";
            string p_ac_year = "2017-2018";

            DataSet ds = await mgr.Fetch_Table_Data(p_projId, p_teamId, p_ac_year);
            jsonString = JsonConvert.SerializeObject(ds);
            var json = JsonConvert.DeserializeObject(jsonString);
            return Ok(json);
        }

TLDashboard.Component.ts

import { Component, OnInit } from '@angular/core';  
import { TLDashboard } from './TLDashboard';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';

@Component({
    selector: 'TLDashboard',  //This is the selector of our section
    templateUrl: 'src/app/TLDashboard/TLDashboard.Component.html'  //HTML tag to render inside of emp selector
})

export class TLDashboardComponent implements OnInit {
    EmployeeDetails: TLDashboard[];

    constructor(private http: HttpClient) { }

    ngOnInit() {
        this.http.get('http://localhost:58320/api/TLDashboard/getTLTeam').subscribe((resp: [TLDashboard]) => {

            this.EmployeeDetails = resp;
            debugger;
            });

    }


}   

TLDashboard.Component.html

<h1> This is our TL Dashboard</h1>
<table border="1">
    <thead>
        <tr>
            <td>Name</td>
            <td>BASIC</td>
            <td>DEPARTMENT NAME</td>
            <td>DESIGNATION DESC</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of EmployeeDetails">
            <td>{{employee.NAME}}</td>
            <td>{{employee.BASIC}}</td>
            <td>{{employee.DEPARTMENT_NAME}}</td>
            <td>{{employee.DESIGNATION_DESC}}</td>
        </tr>


    </tbody>
</table>

0 个答案:

没有答案