Angular: почему событие (изменение) для флажка срабатывает только после двойного щелчка?

У меня есть приложение Angular со списком флажков (mat-checkbox), которое правильно отображает значения на английском или испанском языках в зависимости от локали.

Проблема: Однако сам флажок не всегда проверяется, когда пользователь нажимает на него. Кажется, требуется двойной щелчок. Что могло вызвать что-то подобное?

я пробовал:

• Я просмотрел [checkex] и (change).
• Я попытался изменить свой объекты/класс/интерфейс.
• Я просмотрел документацию Angular.
• Я сделал console.info для всего, что смог найти
• Я просмотрел статьи SO, такие как: Мат-флажок отмечен, не меняя состояния флажка

компонент.html:

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

компонент.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);
    }       
}

интерфейс.ts:

export class CGenericRecord
{
    constructor(
        public ID: number, 
        public Value: string) 
    {}
}
export interface GenericTranslationRecord {
    ID      :   number,
    Value   :   string,
    SpanishValue: string
}

сервис.тс:

public XFormForLocale(grades: GenericTranslationRecord[], localeId: string) : CGenericRecord[] {
    let recs :CGenericRecord[] = [];
    for (let g of grades) 
    {
        recs.push( new CGenericRecord(d.ID, localeId === "es" ? d.SpanishValue : d.Value));
    }
    return recs;
}

Ожидаемый результат: Флажок должен показывать, что он установлен, когда пользователь щелкает его один раз. Он также должен показывать, что он не отмечен после одного щелчка.

Фактический результат: Флажок устанавливается только после нескольких кликов