Currently, I am working on a test project to enhance my knowledge of Angular. However, I have encountered an issue where the student's id fetched from the service is null. To handle the data, I have implemented a StudentController. Below is a snippet of code showing how I retrieve student information:
// GET: api/students
[HttpGet]
public IActionResult GetAll()
{
var students = _unitOfWork.Students.GetAll();
return Ok(students);
}
Furthermore, here is my domain model (Student.cs) with the UnitOfWork method - GetAll():
public class Student
{
public int StudentId{get;set;}
public string Name { get; set; }
public DateTime bDate {get;set;}
}
The implementation of GetAll() in Repository.cs:
public virtual IEnumerable<TEntity> GetAll()
{
return _entities.ToList();
}
In addition, I have created a service to interact with the API and fetch data (student.service.ts):
private readonly _StudentsUrl: string = "/api/students";
GetAll()
{
return this.http.get(this._StudentsUrl)
.map(res => res.json());
}
However, when displaying the data on the client-side, the student's id is undefined (students.component.ts)
export class StudentsComponent {
students:Student[];
constructor(private studentService: StudentService) { }
ngOnInit() {
this.studentService.GetAll()
.subscribe(students => this.students = students);
}
}
export class Student {
StudentId: number;
Name: string;
bDate:DateTimeFormat
}
While rendering the data in student.component.html, the name and bDate values are shown properly but not the StudentId.
<tr *ngFor="let st of students">
<td>{{ st.StudentId }}</td>
<td>{{ st.name }}</td>
<td>{{ st.bDate }}</td>
<td>
<a [routerLink]="['/students/', st.StudentId]">View</a>
</td>
</tr>
I have tested the functionality of my StudentController using Postman, and it seems to be passing data correctly.
Where could I possibly be making a mistake?