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

Question

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

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

Я пробовал :

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

component.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>

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);
    }       
}

interface.ts

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

service.ts

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;
}

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

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

Answer 1

Приведенный выше код приводил к бесконечному циклу.Вместо того, чтобы иметь метод в ngFor, я сделал переменную в машинописи и установил ее = для метода.Затем я использовал эту переменную в HTML.Теперь он работает.

HTML:

<div class="student-history-checkbox" *ngFor="let item of gradesInCurrentLanguageVar">

TS:

this.gradesInCurrentLanguagevar = gradesInCurrentLanguage();