在Angular 2+中获取动态创建复选框中的选定项目,可以通过以下步骤实现:
*ngFor
指令动态创建复选框,并绑定到一个数组的数据源上。例如:<div *ngFor="let item of checkboxItems">
<input type="checkbox" [value]="item.value" [(ngModel)]="item.checked">
{{ item.label }}
</div>
checkboxItems
来存储复选框的选项。每个选项对象包含value
和checked
属性,分别表示选项的值和是否选中。例如:checkboxItems = [
{ value: 'option1', checked: false },
{ value: 'option2', checked: false },
{ value: 'option3', checked: false }
];
checkboxItems
数组,找出checked
属性为true
的选项,并将其值存储到另一个数组中。例如:getSelectedItems() {
const selectedItems = this.checkboxItems.filter(item => item.checked).map(item => item.value);
console.log(selectedItems);
}
getSelectedItems()
方法来获取选中的项目。例如:<button (click)="getSelectedItems()">获取选中项目</button>
这样,当用户选中复选框并点击按钮时,就会在控制台输出选中的项目值。
对于Angular 2+中获取动态创建复选框中的选定项目的完善且全面的答案如上所述。关于Angular的更多信息和相关产品介绍,您可以访问腾讯云的官方文档和网站:
领取专属 10元无门槛券
手把手带您无忧上云