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

如何以angular 9反应形式获取foreach中每个复选框的值

在Angular 9中,可以使用反应式表单来获取foreach中每个复选框的值。以下是一个示例代码:

首先,在组件的HTML模板中,使用ngFor指令来遍历复选框列表,并使用formControlName绑定每个复选框的值到一个FormControl对象:

代码语言:txt
复制
<form [formGroup]="myForm">
  <div *ngFor="let checkbox of checkboxes">
    <label>
      <input type="checkbox" [formControlName]="checkbox.value">
      {{ checkbox.label }}
    </label>
  </div>
</form>

接下来,在组件的TypeScript代码中,创建一个FormGroup对象,并初始化复选框的FormControl对象:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  myForm: FormGroup;
  checkboxes = [
    { label: 'Checkbox 1', value: 'checkbox1' },
    { label: 'Checkbox 2', value: 'checkbox2' },
    { label: 'Checkbox 3', value: 'checkbox3' }
  ];

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({});
    this.checkboxes.forEach(checkbox => {
      this.myForm.addControl(checkbox.value, this.formBuilder.control(false));
    });
  }
}

在上述代码中,通过formBuilder创建了一个空的FormGroup对象,并使用forEach循环遍历复选框列表,为每个复选框创建一个FormControl对象,并将其添加到FormGroup中。

最后,您可以在组件中访问每个复选框的值。例如,您可以在提交表单时获取选中的复选框值:

代码语言:txt
复制
onSubmit() {
  const selectedCheckboxes = Object.keys(this.myForm.value)
    .filter(key => this.myForm.value[key]);
  console.log(selectedCheckboxes);
}

在上述代码中,通过Object.keys(this.myForm.value)获取FormGroup中所有FormControl的键,然后使用filter方法筛选出选中的复选框的键,并将其打印到控制台。

这是一个基本的示例,您可以根据实际需求进行修改和扩展。关于Angular的更多信息和示例,请参考腾讯云的Angular产品文档:Angular产品文档

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

相关·内容

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

这通常用在setter,当类被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...loadChildren会从根文件夹获取绝对路径。RouterModule.forRoot()会获取routes数组并配置路由器。 在子模块中导入模块特定路由。...Observable提供像map,forEach,reduce之类类似于数组运算符,还有强大运算符,retry()或replay()等,使用起来是相当方便。...提议功能 使用反应式扩展(RxJS) 根据时间变化,数组成员可以异步获取 目前Angular 2正式版已经发布,部分产品也已经对Angular 2正式版进行了支持。...其中,反应最为迅速就是Wijmo,Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本 Wijmo。

17.3K80

【JS】547- 200行JS代码,带你实现代码编译器(人人都能学会)

在遍历过程,匹配每种字符并处理成「词法单元」压入「词法单元数组」,当匹配到左括号( ( )时,将往「词法单元数组(tokens)「压入一个」词法单元对象」({type: 'paren', value...return tokens; } 语法分析器 「语法分析器方法」 parser 主要任务:将「词法分析器」返回「词法单元数组」,转换为能够描述语法成分及其关系中间形式(「抽象语法树 AST」...token = tokens[++current]; // 遍历每个词法单元,获取函数参数,直到出现右括号")" while ((token.type !...「开始编译」 上一步得到参数初始化 compiler 对象,注册所有配置插件,插件监听 Webpack 构建生命周期事件节点,做出相应反应,执行对象 run 方法开始执行编译。...// 通过 traverse 提供操作 AST 方法,获取每个节点依赖路径 traverse(ast, { ImportDeclaration: ({node})

2.6K40

【图文详解】200行JS代码,带你实现代码编译器(人人都能学会)

JIT 编译模式开发流程如下: 使用 TypeScript 开发 Angular 应用 运行 tsc 编译 TypeScript 代码 使用 Webpack 或 Gulp 等其他工具构建项目,代码压缩...return tokens; } 语法分析器 语法分析器方法 parser 主要任务:将词法分析器返回词法单元数组,转换为能够描述语法成分及其关系中间形式(抽象语法树 AST)。...token = tokens[++current]; // 遍历每个词法单元,获取函数参数,直到出现右括号")" while ((token.type !...开始编译 上一步得到参数初始化 compiler 对象,注册所有配置插件,插件监听 Webpack 构建生命周期事件节点,做出相应反应,执行对象 run 方法开始执行编译。...// 通过 traverse 提供操作 AST 方法,获取每个节点依赖路径 traverse(ast, { ImportDeclaration: ({node})

3.1K00

详解ANGULAR2组件变化检测机制(对比ANGULAR1脏检测)

Angular 2 编译器为每个组件自动创建变化检测器,而且最终生成这些代码 JavaScript VM友好代码。...这也是为什么新变化检测是快速 (相比于 Angular 1.x $digest)。基本上,每个组件可以在几毫秒内执行数万次检测。因此你应用程序可以快速执行,而无需调整性能。...,我们可以通过组件提供生命周期钩子 ngOnChanges 捕获到变化内容,即 changes 对象,该对象内部结构是 key-value 键值对形式,其中 key 是输入属性,value...变化检测策略 在 Angular 2 我们可以在定义组件 metadata 信息时,设定每个组件变化检测策略。...ChangeDetectorRef ChangeDetectorRef 是组件变化检测器引用,我们可以在组件通过依赖注入方式来获取该对象: import { ChangeDetectorRef

2.9K90

Angular源码分析之$compile

@(Angular) $compile,在Angular即“编译”服务,它涉及到Angular应用“编译”和“链接”两个阶段,根据从DOM树遍历Angular根节点(ng-app)和已构造完毕...$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关操作(指令作用域,控制器绑定以及transclude等),最终返回每个指令链接函数,并将所有指令链接函数合成为一个处理后链接函数...随后,在返回compositeLinkFn,则是遍历linkFns,针对每个链接函数,创建起对应作用域对象(针对创建隔离作用域指令,创建隔离作用域对象,并保存在节点缓存),并处理指令是否设置了...,完成隔离作用域属性单向绑定(@),双向绑定(=)和函数引用(&),针对隔离作用域双向绑定模式(=)实现,则是通过自定义编译器完成简单Angular语法编译,在指定作用域下获取表达式(标示符...),保存为lastValue,并通过设置parentValueFunction添加到当前作用域$watch数组,每次$digest循环,判断双向绑定属性是否变脏(dirty),完成同步。

1.5K50

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

当$digest循环开始后,它会触发每个watcher。这些watchers会检查scope的当前model是否和上一次计算得到model不同。如果不同,那么对应回调函数会被执行。...每个 $watch 记录了上一次表达式。有 ng-bind="a" 即有 $scope.$watch('a', callback),而 $scope....(例如每个 tab 都被封装为一个组件),那么仅当这个 tab 被选中时该 controller 才会执行,可以减少各页面的互相干扰 如果 controller 调用接口获取数据,那么仅当对应 tab...,增加一列复选框或者一列按钮啥,这是就需要用到$compile了。...对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关操作(指令作用域,控制器绑定以及transclude等),最终返回每个指令链接函数,并将所有指令链接函数合成为一个处理后链接函数

7.7K40

浅谈 Angular 项目实战

不过 Angular 模板驱动表单并没有复选框多选绑定,如果有这个需求,可以选择更加灵活强大响应式表单进行数据绑定。其实,对于数组形式数据可以使用天然 select 多选框实现。...然而复选框 value 只有 true 或者 false,而 select 多选框 value 就是数组。所以 Vue 对复选框多选操作进行了处理,而 Angular 没有,需要你自己处理。...通过 Angular 响应式表单可以很容易实现。但是对于模板驱动表单也可以用另类方式实现,比如手动实现一个双向数据绑定,虽然有点麻烦,但却是可行。关于这个话题我放到下一篇文章说明。...我非常喜欢 Angular [()] (盒子里香蕉)这种数据绑定方式,通过阅读官方文档核心知识,对于双向数据绑定认识有了质提高。...Angular 官网对可观察对象(Observable)和承诺(Promise)进行了对比。 需要特别注意就是,只有当订阅 Observable 实例时,它才会开始发布

4.5K00

Java 平台反应式编程(Reactive Programming)入门

就 Java 平台来说,几个突出事件包括:Java 9反应式流规范以 java.util.concurrent.Flow 类方式添加到了标准库;Spring 5对反应式编程模型提供了内置支持,...在前端开发Angular 框架也内置使用了 RxJS。 反应式编程所涵盖内容很多。本 Chat 作为反应式编程入门,主要侧重在 Java 平台。...流元素代表了变量在不同时刻。如果一个变量变化会引起另外一个变量变化,则把前一个变量所表示流作为它所能引起变化另外一个变量对应上游。我们可以把每个商品数量看成一个流。...Rx.Observable.combineLatest 方法作用是把每个 input 所对应流进行合并,从每个获取最新元素,组合成一个数组,作为它所对应元素。...Java 9 Flow 下面我们结合 Java 9 java.util.concurrent.Flow 类来说明反应式流规范。

8.6K60

Change Detection And Batch Update

我们别急着下结论,我们知道应用程序状态改变主要是下面三种情况引起: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...Angular1通过脏检测去更新UI,所谓检测其实指Angular1从$rootScope开始遍历所有scope$$watchers数组,通过比较新老来决定是否更新DOM。...遍历所有scope$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。有人可能会疑惑了,我们在编码时候并没有调用$apply,那么UI是怎么更新呢?...$apply(); }); 小结 在Angular1我们是直接操作数据,这个过程Angular1是感知不到,只能在某个点调用$apply进行脏检测,所以默认就是批量更新。...Vue模板每个指令/数据绑定都有一个对应watcher对象,当数据变化时,会触发watcher重新计算并更新相应DOM。

3.7K70

Change Detection And Batch Update

我们别急着下结论,我们知道应用程序状态改变主要是下面三种情况引起: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...Angular1通过脏检测去更新UI,所谓检测其实指Angular1从$rootScope开始遍历所有scope$$watchers数组,通过比较新老来决定是否更新DOM。...$apply()进行脏检测,核心代码如下 遍历所有scope$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...$apply(); }); 小结 在Angular1我们是直接操作数据,这个过程Angular1是感知不到,只能在某个点调用$apply进行脏检测,所以默认就是批量更新。...Vue模板每个指令/数据绑定都有一个对应watcher对象,当数据变化时,会触发watcher重新计算并更新相应DOM。

3.3K40

常用表单元素有哪些_h5新增表单元素属性

今天小课堂主要内容是,input表单应用,还有在html5新增属性。 表单元素是允许用户在表单(比如:文本域,下拉列表,单选框,复选框等等)输入信息元素,最主要作用就是收集信息。...9. option: 定义下拉列表选项。 接下来是对这些表单元素具体分析。...7. reset:重置按钮,会重置当前表单全部内容。 8. image:图像形式提交按钮,写法是“”。 9. hidden:隐藏域,隐藏字段对于用户是不可见。...在最新html5,有一些表单新增属性,多用于js, datalist : 定义填写一个input时,提示几个option用于提示。可通过inputlist特性与此元素作关联。...7. autocomplete:浏览器是否根据之前提交输入情况对此input自动填(即以option形式匹配之前输入),取值on或off,默认on。

3.4K30

Angular 伪事件

原文 - Angular Pseudo-Events 作者 - Shijir Tsogoo Angular 提供了一个巧妙小功能,用于简化监听键盘事件过程。...尽管在 Angular 模版绑定文档中提到了伪事件 pseudo-event,但是在其他地方没有进一步文档说明。深入之前,我们看看 Angular 伪事件解决了什么问题。...我们简单举个例子,假设你需要添加一个 UNDO 命令来切换复选框。UNDO 命令是恢复用户上一个选择。 如同我们在自己电脑上执行 UNDO 指令一样,指令应该根据 CTRL+Z 组合做出响应。...当你点击 dot 键时候,KeyboardEvent.key 属性是 "."。但是,我们可以想象下,如果在伪事件中使用点作为分隔符,它在语法上是不正确。....'/> 不幸是,Angular 伪事件在大多数字符号键(减号,等号,斜杆,左括号,右括号,反向号等)上仍然缺乏这种映射。由于它们是符号键,这导致非常差可读性,有时候会破坏绑定本身。

23440

Angular ViewChild和ViewChildren

ViewChild Angular 为我们提供 ViewChild 和 ViewChildren 装饰器来获取模板视图中匹配元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配元素。...视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数,就能正常获取查询元素。...组件,ViewChild 装饰器除了支持 Type 类型参数外,还支持字符串参数,而字符串是模板引用。...: @ViewChild('email') email: ElementRef; 最后在 ngAfterViewInit 生命周期钩子输出 email 属性: ngAfterViewInit()...为了能够支持跨平台,Angular 通过抽象层封装了不同平台差异,统一了 API 接口。定义了抽象类 Renderer2 、抽象类 RootRenderer 等。

2.7K20

AngularDart 4.0 高级-管道 顶

每个应用程序都以一个简单任务开始:获取数据,转换它们,并将它们展示给用户。 获取数据可以像创建本地变量一样简单,也可以像通过WebSocket传输流数据一样复杂。...如果管道接受多个参数,请使用冒号分隔slice:1:5) 修改生日模板以给日期管道一个格式参数。...在前面的例子,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册。 要在实例查看行为(查看源代码),请更改模板和可选指数。...管道和变化检测 Angular通过在每个DOM事件之后运行更改检测过程查找数据绑定更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能是昂贵Angular努力尽可能降低成本并适当。...当您使用管道时,Angular会选择更简单,更快速变更检测算法。  不使用管道 在下一个示例,组件使用默认积极变化检测策略来监控并更新其hero列表每个英雄显示。

6.3K20

看我如何利用漏洞窃取麦当劳网站注册用户密码

还可能获取到网站注册用户更多信息。...通过更改搜索参数q为{{$id}}之后,发现返回对应AngularJS范围内对应ID数字9: Link used: https://www.mcdonalds.com/us/en-us/search-results.html...其中括号表达式被执行了,这就意味着,如果服务端允许用户输入参数带有花括号,我们就可以用Angular表达式来进行xss攻击。...,返回如下: 这就意味着,我们可以利用绕过命令,对网站加载外部JS脚本文件,构造如下命令: {{x = {'y':''.constructor.prototype}; x['y'].charAt=[...另外,以下源码分析显示,麦当劳网站使用了JavascriptCryptoJS加密库进行信息加密,加密方式为3DES,其中加密参数key和iv都为通用,这意味着只需要获取到cookie就能对密码解密

2K60

Angular学习笔记(一)

组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...@Component 里面的元数据会告诉 Angular 从哪里获取你为组件指定主要构建块。...指令 Angular 模板是动态。当 Angular 渲染它们时,它会根据指令提供操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:、函数,或应用所需特性。...DOM移除 NgSwitch - 一组指令,用于切换一组视图 NgFor - 对列表每个条目重复套用同一个模板 模板引用变量 # var 3....ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应

3.3K20
领券