Question

我有一个带有复选框列表（mat-checkbox）的Angular应用程序，该列表可以根据语言环境正确显示英语或西班牙语值。

问题：但是，当用户单击复选框时，复选框本身并没有得到一致的检查。它似乎需要双击。是什么会引起这样的事情？

我已经尝试：

我研究了[checkex]和（更改）。
我尝试过更换我的对象/类/接口。
我已经阅读了Angular文档。
我已经在所有可以找到的内容上完成了console.log
我浏览了SO文章，例如： 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)">{{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：

this.gradesInCurrentLanguagevar = gradesInCurrentLanguage();

TS：

{{1}}

Angular：为什么复选框的（更改）事件仅在双击后才触发？

1 个答案: