Clash Royale CLAN TAG

Angular checked function is ignored because of ngModel

Im new at Angular.

Im trying to create a checkbox table which compared with another table and will checked it if it existed.
this function works great, but when im adding ngModel - in order to save the changes, the checked function somehow ignored when first loading the page.

<tbody>
<tr *ngFor="let w of workout;let i = index">
<td>
<div class="col-md-6">
<input
type="checkbox"
name="workout_{{i}}"
[checked]="checkIfExisted(w)"
[value]="w"
[(ngModel)]="program.workouts[i]">

</div>
</td>
<td>
<div class="col-md-6">{{w.workoutName}}</div>
</td>
</tr>
</tbody>


My function:

checkIfExisted(w:WORKOUT){
if(!this.program.workouts || this.program.workouts.length == 0){
console.log('no workouts found');
return false;
}

this.arr = this.program.workouts.map(workout => workout.workoutId);

if(this.arr.includes(w.workoutId)) {
console.log('return true');
return true;
}


Program object:

import { WORKOUT } from './workout.model';
export class PROGRAM {
programId:number = 0;
programName:string = '';
programTarget:string = '';
programNote:string = '';
numOfExercises:number;
workouts: WORKOUT;
}


Another issue is that when im saving, in the ngFrom it saves it like this:

web screen

{programName: "a", programTarget: "", programNote: "", numOfExercises: 1, workout_0: false, …}
numOfExercises:1
programName:"a"
programNote:""
programTarget:""
workout_0:false
workout_1:true


Instead of saving the whole object is saves: workout_0:false, workout_1:true

Please assist :)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.