My angular app doesn't fetch data from the in-memory web api anymore

Question

I'm building a project I have to submit today and it was fine, that's it could fetch data from the in-memory web api through the http.get() and display in the table in the data component and also when i clicked on a particular student, it takes me to to the detail component and displays info for that particular student. But i don't know what's wrong cause it now alerts "Fetched students" like before but doesn't display the data.

This is the student.service.ts:

import { Injectable } from '@angular/core';
import { Student } from './Student';
import { Students } from './mock-students';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  private StudentsUrl = 'api/Students';  // URL to web api

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(private http: HttpClient) { }

  /* GET Students from the server */
  getStudents(): Observable<Student[]> {
    return this.http.get<Student[]>(this.StudentsUrl)
      .pipe(
        tap(_ => alert('Fetched Students')),
        catchError(this.handleError<Student[]>('getStudents', []))
      );
  }

This is the data.component.ts file

import { Component, OnInit } from '@angular/core';
import { Student } from '../Student';
import { Course } from '../Course';
import { Score } from '../Score';
import { StudentService } from '../student.service';
import { Courses } from '../courses-mock';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  students: Student[] = [];
  
  constructor(private studentService: StudentService) { }
  
  ngOnInit(): void {
    this.getStudents();
  }

  getStudents(): void{
    this.studentService.getStudents().subscribe(students => this.students = students)
  }

This is the data.component.html file (displays all students in a table... but no more):

<nav>
    <div class="title">
        <a href="#">Student Management System</a>
    </div>

    <div class="addStudentBtn">
        <button class="btn" type="button" (click)="openModal()">Add Student</button>
    </div>
</nav>

<div class="searchContainer">
    <app-search></app-search>
</div>

<div class="dataContainer">
    <table>
        <tr class="head">
            <th>#</th>
            <th>Name</th>
            <th>MatNo</th>
            <th>Actions</th>
        </tr>
        <tr *ngFor="let student of students; let i = index">
            <td>{{i+1}}</td>
            <td>{{student.studentName}}</td>
            <td>{{student.matNo}}</td>
            <td class="actions">
                <a routerLink="/studentDetail/{{student.matNo}}"><button class="btn-info">Results</button></a>
                <button class="btn-edit" edit(student)>Edit</button>
                <button class="btn-delete" (click)="delete(student)">Delete</button>
            </td>
        </tr>
    </table>
</div>

<div class="modal" id="modal">
    <h3>Add Student</h3>
    <span (click)="onClose()">x</span>
    <form>
        <input type="text" placeholder="Matricule number" name="matNo"  #matNo>
        <input type="text" placeholder="Student name" name="studentName"  #studentName>
        <input type="text" placeholder="CA mark" name="caMark" #caMark>
        <input type="text" placeholder="Exam mark" name="examMark" #examMark>
        <button type="submit" 
        (click)="add(matNo.value, studentName.value); matNo.value=''; onClose()"
        >Add Student</button>
    </form>
</div>

The in-memory-data.service.ts:

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Course } from './Course';
import { Student } from './Student';
import { Score } from './Score';

@Injectable({
  providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
  createDb() {

    const Students: Student[] = [
      { studentName: "John Doe", matNo: 'SC20A392' },
      { studentName: "Dick Dick Bobi", matNo: 'SC20B101' },
      { studentName: "Leslie Apple", matNo: 'SC20C123' },
      { studentName: "Paul Paul", matNo: 'SC20C699' },
      { studentName: "Vanessa Glory", matNo: 'SC19A100' },
      { studentName: "Micheal Angel", matNo: 'SC20B056' },
      { studentName: "Rob Dickson", matNo: 'SC20B112' },
      { studentName: "Jane Mellisa", matNo: 'SC20C222' },
      ];
    return { Students };
  }
}

Answer 1

Boom! I found why, actually a friend told me why. He said I should use an id to index a student and not a matNo which is a string in this case. Meaning I needed to pass a number as an id to the API for it to fetch the student's info. Thanks