在Angular中使用ngFor获取嵌套对象数组的选定值,可以通过以下步骤实现:
<div *ngFor="let item of items">
<!-- 显示item的属性 -->
<p>{{ item.name }}</p>
<!-- 显示item的子对象数组 -->
<div *ngFor="let subItem of item.subItems">
<label>
<!-- 使用ngModel绑定选定值 -->
<input type="checkbox" [(ngModel)]="subItem.selected">
{{ subItem.name }}
</label>
</div>
</div>
在上面的示例中,我们使用了两个ngFor指令。外部的ngFor用于遍历嵌套对象数组"items",内部的ngFor用于遍历每个item对象中的子对象数组"subItems"。
getSelectedItems(): any[] {
const selectedItems: any[] = [];
for (const item of this.items) {
for (const subItem of item.subItems) {
if (subItem.selected) {
selectedItems.push(subItem);
}
}
}
return selectedItems;
}
在上面的示例中,我们遍历嵌套对象数组"items"和每个item对象中的子对象数组"subItems",检查每个子对象的"selected"属性是否为true,如果是,则将其添加到"selectedItems"数组中。
<input type="checkbox" [(ngModel)]="subItem.selected" (change)="getSelectedItems()">
这样,每当用户选择或取消选择复选框时,"getSelectedItems"方法都会被调用,以获取最新的选定值。
总结起来,以上是在Angular中使用ngFor获取嵌套对象数组的选定值的步骤。通过使用ngFor指令遍历嵌套对象数组,并结合ngModel指令实现双向数据绑定,可以方便地获取选定的值。
领取专属 10元无门槛券
手把手带您无忧上云