首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Angular中使用ngFor获取嵌套对象数组的选定值?

在Angular中使用ngFor获取嵌套对象数组的选定值,可以通过以下步骤实现:

  1. 首先,确保你已经导入了Angular的FormsModule模块,以便使用ngModel指令。
  2. 在组件的HTML模板中,使用ngFor指令遍历嵌套对象数组。例如,假设你有一个名为"items"的嵌套对象数组,可以这样使用ngFor:
代码语言:txt
复制
<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"。

  1. 在组件的TypeScript代码中,定义一个方法来获取选定的值。例如,你可以创建一个名为"getSelectedItems"的方法:
代码语言:txt
复制
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"数组中。

  1. 如果你想在用户选择选项时立即获取选定的值,可以在复选框的change事件中调用"getSelectedItems"方法。例如:
代码语言:txt
复制
<input type="checkbox" [(ngModel)]="subItem.selected" (change)="getSelectedItems()">

这样,每当用户选择或取消选择复选框时,"getSelectedItems"方法都会被调用,以获取最新的选定值。

总结起来,以上是在Angular中使用ngFor获取嵌套对象数组的选定值的步骤。通过使用ngFor指令遍历嵌套对象数组,并结合ngModel指令实现双向数据绑定,可以方便地获取选定的值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-04明细 顶

> {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数列出。...当用户选择一个英雄时,selectedHero变为非null,ngIf将英雄详细内容放入DOM,并评估嵌套绑定。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表识别选定英雄。...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。  ...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

3K30

Angular 结构指令模式 - 它们是什么且怎么使用

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...*ngIf - 根据表达式返回布尔,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...*ngFor 指令 我们使用 *ngFor 指令来遍历数组。...当条件是 true 时候,相关元素就会被渲染到 DOM ,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素到 DOM 。...总结 结构指令是 Angular 很重要一部分,我们可以通过多种方式使用它们。 希望通过本文,读者能更好理解怎么去使用这些指令和什么时候去使用这些模式。 本文为译文,采用意译形式。

3.8K20

AngularDart4.0 指南- 模板语法二 顶

模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件存储到模型。 绑定通过一个名为$event事件对象来传递关于该事件信息,包括数据。 事件对象形状由目标事件决定。...使用HTML表单元素(和)双向绑定会很方便。 但是,没有原生HTML元素遵循x和xChange事件模式。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪方法。 在这个例子,这个就是英雄ID。...input属性通常接收数据。 Output属性公开事件生成器,Stream对象。 术语input和Output反映了目标指令视角。 ?

29.9K20

Angular 显示英雄列表

当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式定义那个。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它设置为 selectedHero。...当用户选择一个英雄时,selectedHero 也就有了,并且 ngIf 把英雄详情放回到 DOM 。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...某些情况下,我们只是想要更新控件组某个控件数据,这时需要使用 patchValue 方式进行更新 import { Component, OnInit } from '@angular/core...使用 FormBuilder 构建控件,每个控件名对应都是一个数组,第一个为控件默认,第二项和第三项则是针对这个设定同步、异步验证方法 import { Component, OnInit...,返回 null,当数据无效时,则会返回一个对象信息,这里 nameinvalid 就是我们在模板获取错误信息 key <label...ngOnInit(): void { } } 在针对多个字段进行交叉验证时,在模板页面,则需要通过获取整个表单错误对象信息来获取到交叉验证错误信息 <div class="form-group

18.9K20

Angular 显示英雄列表

当依次遍历这个列表时,hero 会为每个迭代保存当前英雄对象。 不要忘了 ngFor 前面的星号(*),它是该语法关键部分。 浏览器刷新之后,英雄列表出现了。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式定义那个。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它设置为 selectedHero。...当用户选择一个英雄时,selectedHero 也就有了,并且 ngIf 把英雄详情放回到 DOM 。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

Angular 从入坑到挖坑 - Router 路由使用入门指北

、query 查询参数传递 最常见一种参数传递方式,在需要跳转路由地址后面加上参数和对应,在跳转后页面通过获取参数 key 从而获取到对应参数值 <a href="www.yoursite.com...对于参数<em>对象</em><em>中</em><em>的</em>属性(key)对应<em>的</em>属性<em>值</em>(value),我们可以绑定一个组件<em>中</em><em>的</em>属性进行动态<em>的</em>赋值,也可以通过添加单引号将参数值作为一个固定<em>的</em>数值,例如在下面代码<em>中</em><em>的</em>两个查询参数就是固定<em>的</em><em>值</em> <a class...在 <em>Angular</em> <em>中</em>,需要在组件类<em>中</em>依赖注入 ActivatedRoute 来<em>获取</em>传递<em>的</em>参数信息 这里<em>的</em> queryParamMap 是一个 Observable <em>对象</em>,所以这里需要<em>使用</em> subscribe...,在 a 标签绑定<em>的</em> routerLink 属性<em>数组</em><em>的</em>第二个数据<em>中</em>,需要指定我们传递<em>的</em>参数值。...与<em>使用</em> query 查询参数传递数据不同,此时需要将跳转<em>的</em>链接与对应<em>的</em>参数值组合成为一个<em>数组</em>参数进行传递 import { Component, OnInit } from '@<em>angular</em>/core

4.2K50

Angular 6.x 快速入门

第二节 - 插表达式 在 Angular ,我们可以使用语法实现数据绑定。...name = 'Angular'; } 定义数据接口 在 TypeScript 接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...基础知识 ngIf 指令简介 该指令用于根据表达式,动态控制模板内容显示与隐藏。它与 AngularJS 1.x ng-if 指令功能是等价。... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x ng-repeat 指令功能是等价。...反之,我们路径将在 URL 地址栏显示,随后进行后续视图更新,以匹配 routerLink 设置

14.1K20

Angular快速学习笔记(3) -- 组件与模板

使用表达式,就把属性名包裹在双花括号里放进视图模板, {{myHero}}。...="let hero of heroes"> {{ hero.name }} ` 在模板里可以自己使用.语法,访问对象属性 使用 ngFor 显示数组属性... 小结 带有双花括号表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你组件描述模型数据并显示模型属性 用 ngIf...模板,你仍使用同样方式创建结构和初始化 attribute 。...Angular 管道对像这样小型转换来说是个明智选择。 管道是一个简单函数,它接受一个输入,并返回转换结果。 它们很容易用于模板表达式,只要使用管道操作符 (|) 就行了。

15.2K30

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插表达式显示组件属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 ---- 通过插表达式显示组件属性...要显示组件属性,插是最简单方式,格式为:{{属性名}}。...以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到几个文件。...{ title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和 mySite 属性,并显示在浏览器,显示信息如下: 使用 ngFor...显示数组属性 我们也可以循环输出多个站点,修改以下文件: app/app.component.ts 文件: import { Component } from '@angular/core'; @Component

2.4K20

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

绑定赋值条件表达式特殊之处: 不支持: 赋值 (=, +=, -=, ...) new运算符 使用;或,链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(...b : 会判断item是否有a这个,防止undefined或者null让视图渲染报错 ---- 最最最常用内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item"...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

6.2K20

Angular 2.x折腾记 :(2)初步认识angular2,不一样开发模式

, |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内[单向,数据流向视图],指令,原生html控件自身属性[value...new运算符 使用;或.链式表达式 自增或自减操作符 (++和--) 不支持位运算|和& 支持: 逻辑运算(|| , &&) 三目运算符( true ?...b : 会判断item是否有a这个,防止undefined或者null让视图渲染报错 最常用内置指令 样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式...[class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index = index": 可以用这个来遍历数组对象...总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由配置及懒加载这些, 模板驱动表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

8910
领券