Angular: why does my mat-checkbox does not show as checked after single click?

I have an Angular application with a checkbox list (mat-checkbox) that is properly displaying the English or Spanish values depending on locale.

Problem: However, the checkbox itself is not consistently being checked when the user clicks on it. It takes multiple tries (no specific amount). What could cause something like this?

I've tried:

• I have looked into [checkex] and (change).
• I have tried changing my objects/class/interface.
• I've looked through Angular documentation.
• I've done console.log on everything I could find
• I've looked through SO articles such as: Mat-checkbox checked not changing checkbox state

component.html:

<div class="student-history-checkbox" *ngFor="let item of gradesInCurrentLanguage()">
    <mat-checkbox [checked]="isChecked(item.ID)" (change)="onChangeCB($event, item.ID)"></mat-checkbox>
</div>

component.ts:

public gradesInCurrentLanguage() : CGenericRecord[] {
    return this.ms.XFormForLocale(this.grades, this.localeId);
}


isChecked(ID : number)
{
    return (this.gradeInfo.Grades.indexOf(ID) > -1) ? true : false;
}



onChangeCB(event : any, id : number)
{
    if(event.checked && this.gradeInfo.Grades.indexOf(id) == -1){
        this.gradeInfo.Grades.push(id);
    }else{
        let index = this.gradeInfo.Grades.indexOf(id);
        this.gradeInfo.Grades.splice(index, 1);
    }       
}

Didn't want to make this post too long, but I can provide service and interface code as well if needed.

Expected result: Checkbox should show that it is checked when the user clicks on it once. It should also show that it is unchecked after one click.

Actual result: Checkbox is only checked after multiple clicks