我在Angular 15
和Angular Material 14
中工作,下面是我用来显示复选框列表的HTML代码
<div *ngFor="let control of checkboxArray.controls;let i = index" >
<mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);">
{{ checkboxItems[i].name }}
</mat-checkbox>
</div>
下面是Angular中onCheckedChange
个函数的代码
onCheckedChange(index: number) {
this.sortCheckboxArray();
const checkboxItem = this.checkboxItems[index];
const control = this.checkboxArray.at(index);
if (control) {
if (control.value) {
this.lists.push(checkboxItem.id.toString());
} else {
this.lists.pop(checkboxItem.id.toString());
}
}
this.updateSubscriberGroupsCount();
this.cdr.detectChanges();
}
加载CheckBoxlist控件时,大多数控件的名称将消失,如下所示...
当我选中复选框时,在这个onCheckedChange
函数中,Control.Value总是返回FALSE.哪里出了问题?我不明白..
EDIT个
以下是我之前为addCheckbox
函数编写的代码
addCheckbox(id: number, name: string, checked: boolean) {
const control = new FormControl(false);
this.checkboxArray.push(control);
const checkboxItem: SubscribersNotification = { id:id, name:name, checked: false };
this.checkboxItems.push(checkboxItem);
}
使用此复选框可正确加载控件.但选中/取消选中复选框控件不起作用.
如何修改此代码,使其正确侦听选中/取消选中...