Just getting started with Angular here.
I’m working on a checkbox table that compares to another table and automatically checks if it exists.
The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ignored when the page loads:
<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>
The checking function looks like this:
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;
}
Here's how the Program object is structured:
import { WORKOUT } from './workout.model';
export class PROGRAM {
programId:number = 0;
programName:string = '';
programTarget:string = '';
programNote:string = '';
numOfExercises:number;
workouts: WORKOUT[];
}
Another problem arises during saving, where in ngFrom, it saves in a format like this:
{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, it only saves individual entries like workout_0:false, workout_1:true