Agular HTTP get request not retriving data to interface class object

I want to retrieve data of teachers from teacher component through teacher id in URL. In list of Teacher first Teacher Data Shows But Other Teacher Data doesn't Show I don't Why..

I have tried Console.log Data is shown in log for Every Teacher there.

Teacher list enter image description here

Teacher data for first teacher in List enter image description here

Teacher Data For Rest of Teachers enter image description here

Here is my code of interface file

export interface Iteacherschedules{
    id : Number,
    teacher_id : Number,
    subject : string | null,
    class : string | null,
    timingfrom : string | null,
    timingto : string | null,
    duration : string | null
}

//Code for teacherschedulte.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Iteacherschedules } from '../teacherschedules/teacherschedules';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TeacherschedulteService {

  private _url = 'http://127.0.0.1:8000/api/teacherschedule'
  constructor(private  http : HttpClient) { }
 
  list(id: number) : Observable<any[]>{
    var murl = this._url +'/'+id;
    return this.http.get<any[]>(murl);
  }
  update(teacherschedule : Iteacherschedules) : Observable<Iteacherschedules>{
    var mcurl = this._url +'/'+teacherschedule.id;
    return this.http.put<Iteacherschedules>(mcurl, teacherschedule);

  }
   


}

Code for teacherschedules.component.ts file

import { Component, OnInit ,TemplateRef } from '@angular/core';
import { TeacherschedulteService } from '../service/teacherschedulte.service'; 
import { Iteacherschedules } from './teacherschedules'; 
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Observable, Subscription } from 'rxjs';
import { FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-teacherschedules',
  templateUrl: './teacherschedules.component.html',
  styleUrls: ['./teacherschedules.component.css']
})
export class TeacherschedulesComponent implements OnInit {
 
  modalRef?: BsModalRef;
  public ModalTitle = '';
  public selectedvalues = <Iteacherschedules>{};
  public btntitle = '';
  public classs = new FormControl('');
  public subject = new FormControl('');
  public teacher_id = 0;
  
 
  constructor(private route: ActivatedRoute, private modalService: BsModalService, private service:TeacherschedulteService ) { }
  
  openModal(template: TemplateRef<any> , teachersc:Iteacherschedules) {
    
      this.ModalTitle = "Edit Teacher";
      this.selectedvalues = teachersc;
      this.btntitle = "Update";
      this.classs.setValue(teachersc.class);
      this.subject.setValue(teachersc.subject);
     
    this.modalRef = this.modalService.show(template);
  }

  public teachersch = <Iteacherschedules[]>{};

  ngOnInit(): void {
      const id  = this.route.snapshot.paramMap.get('id');
      this.teacher_id  = +id;
      //alert(this.teacher_id);
      this.getteacherschedule(this.teacher_id); 
    
  }

  getteacherschedule(id: number){
    this.service.list(id)
    .subscribe(response => this.teachersch = response);
    console.log(this.teachersch);
    this.resetvalues();
 }

 save(){
  this.selectedvalues.class = this.classs.value;
  this.selectedvalues.subject = this.subject.value;
  this.service.update(this.selectedvalues).subscribe(_response => this.getteacherschedule(this.teacher_id));
    
}

resetvalues(){
  this.classs.reset();
  this.subject.reset();
}

 
}

and here is component.html file

<div class="container mt-5">
    <h2 class=" my-4" >Teacher Schedule</h2>
    <table class="table table-bordered">
        <thead>
          <tr> 
            <th scope="col">Class</th>
            <th scope="col">Subject</th>
            <th scope="col">Timing</th>
            <th scope="col">Duration</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let schedu of teachersch; index as i" >
            <ng-container *ngIf="schedu.timingfrom == 'Break'; else simpleresult">
               
              <td colspan="6" class="text-center"><b>Break / Teacher Meeting</b></td>
              </ng-container>
              <ng-template #simpleresult> 
            <td>{{ schedu.class}}</td>
            <td>{{ schedu.subject }}</td>
            <td>{{ schedu.timingfrom }} - {{  schedu.timingto }}</td>
            <td>{{ schedu.duration }}</td>
            <td>
                <button type="button" class="btn btn-primary mx-1" (click)="openModal(template, schedu)">Edit</button>
             </td>
            </ng-template>
          </tr>
          <tr>
          <td colspan="6" class="text-center"><b>OFF</b></td>
        </tr>



          
 

          
        </tbody>
      </table>
      <ng-template #template>
        <div class="modal-header">
          <h4 class="modal-title pull-left">{{ModalTitle}}</h4>
          <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
            <span aria-hidden="true" class="visually-hidden">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <h3> </h3>
            <form>
                <div class="form-group">
                  <label for="teachername">Class</label>
                  <input type="text" class="form-control" placeholder="Class" [formControl]="classs">
                </div>
                <div class="form-group">
                  <label for="qualification">Subject</label>
                  <input type="text" class="form-control"  placeholder="subject" [formControl]="subject">
                </div>
                
             <button type="button" class="btn btn-primary my-3" (click)="modalRef?.hide();save()">{{btntitle}}</button>
              </form>
        </div>
      </ng-template>
</div>

Thanks in advance