I am facing an issue with my edit form. I have added a new function saveSeminar() to save the changes made in the userSeminar data. However, when I try to save the changes, it throws an error even though the data is correctly displayed in HTML. Upon clicking save, it shows as undefined.
Below is the snippet from my component.html file:
<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');
});
}Upon executing the code, the following error pops up:
https://i.sstatic.net/A6LXR.png