我正在数据集中的控制器上获取数据,并且已经检查了我在服务响应中获取的所有数据。现在,我想将此数据绑定到表中。我该如何实现?
下面的控制器中的功能正在从数据库中获取数据。
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>