时间戳

首页 > 解决方案 > Angular：为什么复选框的（更改）事件仅在双击后触发？

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

问题描述

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

问题：但是，当用户单击复选框时，复选框本身并没有被始终选中。它似乎需要双击。什么可能导致这样的事情？

我试过了：

组件.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
}

服务.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;
}

预期结果：当用户单击一次复选框时，复选框应显示已选中。它还应该显示它在单击后未选中。

实际结果：复选框仅在多次单击后才被选中

标签： angulartypescripteventscheckbox

解决方案

上面的代码导致了一个无限循环。我没有在 ngFor 中使用该方法，而是在 typescript 中创建了一个变量并将其设置为 = 方法。然后我在 HTML 中使用了该变量。现在可以了。

HTML：

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

TS：

this.gradesInCurrentLanguagevar = gradesInCurrentLanguage();

推荐阅读