Angular 11: Cannot read properties of undefined (reading '0')

I have an edit form that displays userSeminar data now i’ve added saveSeminar() which i want to save my changes but it gives me error even though data in html is correctly being displayed. When i press save it gives undefined.

Here is my component.html

<tr *ngFor="let item of userSeminar; let i = index">
  <ng-container>
    <td>
      <input type="text" name="SeminarName" class="form-control table-ta-input"
      placeholder="Seminar Name" [(ngModel)]="userSeminar[i].name">
    </td>
    <td class="text-center">
      <a href="#save-seminar" (click)="saveSeminar(i)">
        <i class="fa fa-check">
        </i>
      </a>
    </td>
  </ng-container>
  <ng-template #noEdit>
    <td>
      {{ item.name }}
    </td>
    <td class="text-center">
      <button class="btn tbl-btn-sm" (click)="editSeminar(i)">
        <i class="fa fa-edit">
        </i>
      </button>
      <button class="btn tbl-btn-sm" href="#confirm-modal" data-toggle="modal">
        <i class="fa fa-trash">
        </i>
      </button>
    </td>
  </ng-template>
</tr>
                                                    

Component.ts

private saveSeminar(index) {
    event.preventDefault();
    console.log(index)
    this.updateUserSeminar(index);
}

  private updateUserSeminar(index) {
    this.apiService.update('users/seminar', this.userSeminars[index].id, this.userSeminars[index])
    .subscribe(
    response => {
        // this.userSeminars[index].edit = false;
        // this.getUserSeminar(index.employee_number);
        console.log('Seminar Successfully updated', 'Success');
    });
  }

Then it gives me this error

>Solution :

In updateUserSeminar method, try to replace this.userSeminars[index].id with this.userSeminar[index].id and this.userSeminars[index] with this.userSeminar[index], since you are using userSeminar in HTML.