Angular 复选框：更改未正确反映

Question

我在 Angular 项目中面临一个问题，其中选项表单中有多个复选框。问题是有时复选框中的更改无法正确反映。这是相关代码：

<form class="theme-form">
    <div *ngFor="let contactType of contactTypeDataList" class="checkbox-theme">
        <label [for]="contactType.Type" class="arrow-labe2">
            <input class="form-control" [id]="contactType.TypeId" class="styled" type="checkbox"
                [checked]="contactType.IsActive"
                [value]="contactType.TypeId" (change)="onTypeCheckboxChange($event, contactType)">
            {{ contactType.Type }}
        </label>
    </div>
</form>

Answer 1

我认为当你应该动态设置它时静态设置 [id]="" 的问题是 [attr.id]=""

<form class="theme-form">
    <div *ngFor="let contactType of contactTypeDataList" class="checkbox-theme">
        <label for="contactType.Type" class="arrow-labe2">
            <input class="form-control styled" [attr.id]="contactType.TypeId"  type="checkbox"
                [checked]="contactType.IsActive"
                [value]="contactType.TypeId" (change)="onTypeCheckboxChange($event, contactType)">
            {{ contactType.Type }}
        </label>
    </div>
</form>