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

Angular 7:如何将一些复选框(使用*ngFor动态生成)重置为它之前的状态,只需单击一个按钮

在Angular 7中,要将一些复选框重置为之前的状态,只需单击一个按钮,可以按照以下步骤进行操作:

  1. 首先,在组件的HTML模板中,使用*ngFor指令动态生成复选框,并使用[(ngModel)]指令绑定每个复选框的状态到组件的属性。例如:
代码语言:txt
复制
<div *ngFor="let item of items">
  <input type="checkbox" [(ngModel)]="item.checked">{{ item.name }}
</div>
<button (click)="resetCheckboxes()">重置</button>
  1. 在组件的TypeScript文件中,定义一个名为items的数组属性,用于存储复选框的状态。例如:
代码语言:txt
复制
items = [
  { name: '选项1', checked: false },
  { name: '选项2', checked: true },
  { name: '选项3', checked: false }
];
  1. 在组件的TypeScript文件中,实现resetCheckboxes()方法,该方法会将items数组中每个复选框的状态重置为之前的状态。例如:
代码语言:txt
复制
resetCheckboxes() {
  this.items.forEach(item => {
    item.checked = false; // 将复选框状态重置为false
  });
}

这样,当点击"重置"按钮时,resetCheckboxes()方法会遍历items数组,并将每个复选框的状态重置为false,从而将复选框重置为之前的状态。

对于这个问题,腾讯云并没有特定的产品或链接与之相关。但是,腾讯云提供了丰富的云计算服务和解决方案,可以满足各种应用场景的需求。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的信息。

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

相关·内容

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

在以下示例中,目标是按钮的单击事件。...NgStyle 您可以根据组件的状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值的简单方法。...模板输入变量 hero之前的let关键字创建一个名为hero的模板输入变量。 ngFor指令迭代由父组件的heroes属性返回的heroes,并在每次迭代期间将hero设置为列表中的当前项目。...接下来的部分将介绍这些操作符中的两个:管道和安全导航操作符。 管道操作符(|) 在准备使用绑定之前,表达式的结果可能需要进行一些转换。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入值并返回一个转换后的值。

30K20

AngularDart4.0 指南- 表单 顶

指令的exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令的exportAs属性是“ngForm”。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。...概要 Angular表单为数据修改,验证等提供支持。 在此页面中,您学习了如何使用以下功能: 一个HTML表单模板和一个带有@Component注解的表单组件类。...NgForm.form的有效性来设置提交按钮的启用状态。 自定义CSS类为用户提供有关控制状态的可视反馈。 最终的项目文件夹结构应该如下所示: ?

17.5K30
  • AngularDart 4.0 高级-生命周期钩子 顶

    组件有一个由Angular自己管理的生命周期。 Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...SpyDirective可以使用ngOnInit和ngOnDestroy挂钩创建或销毁它探测的元素。...DoCheck 使用自定义更改检测实现ngDoCheck方法。 看看Angular多久会调用这个钩子,并在更改日志后观察它。 AfterView 通过视图显示Angular的意图。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?...添加一个英雄会产生一个新的英雄。 间谍的ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM中移除所有英雄元素并同时销毁他们的间谍指令。

    6.2K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    注册HTTP服务 在应用程序可以使用BrowserClient之前,您必须将其注册为服务提供者。 您应该可以从应用程序的任何位置访问BrowserClient服务。...然后使用_extractData辅助方法来解码响应主体。 响应JSON有一个单一的数据属性,它拥有主叫方想要的英雄列表。 所以你抓住这个列表并把它作为已解决的Future值返回。...现在是时候添加创建和删除英雄的能力了。 更新英雄的细节 尝试在英雄详情视图中编辑英雄的名字。 当你输入时,英雄的名字在视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄的能力 要添加英雄,应用程序需要英雄的名字。 您可以使用与添加按钮配对的输入元素。...您可以启动一个请求,取消它,并在服务器响应第一个请求之前发出不同的请求。 使用期货很难实现请求取消新请求序列,但使用Streams很容易。 添加按名称搜索的功能 你要添加一个英雄搜索功能的英雄之旅。

    11K30

    AngularDart 4.0 高级-HTTP 客户端 顶

    下面的代码为Client注册了一个 factory provider (创建了一个 BrowserClient 实例) :  web/main.dart (v1) import 'package:angular...= null">{{errorMessage}} 模板的ngFor指令显示heroes列表.列表下面是输入框和Add Hero按钮,允许用户添加新的英雄....一个模板引用变量, newHeroName, 赋予(click)事件绑定存取输入框的值. 当用户单击按钮时, 单击处理程序传递输入值到addHero()方法. 单击处理程序清空输入框....获取数据 在之前的示例中,应用通过返回服务中的模拟英雄来伪造与服务器的交互: import 'dart:async'; import 'package:angular/angular.dart';...这个简单的数据服务遵循典型的REST指导方针. 它支持一个POST请求 和GET heroes使用了同样的端点.

    9.7K10

    优化查询性能(一)

    可以单击任务名称查看任务详细信息。在Task Details(任务详细信息)显示中,可以使用Run(运行)按钮强制立即执行任务。...默认值为50分钟。日期和时间选项默认为当天午夜(23:59)之前。强烈建议指定超时选项。 重置选项:如果收集选项为2或3,则可以指定超时值到期时要重置为的收集选项。可用选项为0和1。...输入一个SQL查询文本,或使用Show History按钮检索一个。 可以通过单击右边的圆形“X”圆来清除查询文本字段。 使用Show Plan With SQL Stats按钮执行。...当这个复选框被选中时,你会看到一个进度条显示“请等待…”的消息。...查看统计信息 View Stats(查看统计信息)选项卡为提供了在此系统上收集的运行时统计信息的总体视图。 可以单击任何一个View Stats列标题对查询统计信息进行排序。

    2K10

    AngularDart 4.0 高级-管道 顶

    ,并将其单击事件绑定到组件的toggleFormat()方法。...你的管道有一个这样的参数:exponent。 为了告诉Angular这是一个管道,应用从主Angular库导入的@Pipe注解。 @Pipe注解允许您定义将在模板表达式中使用的管道名称。...当您使用管道时,Angular会选择更简单,更快速的变更检测算法。  不使用管道 在下一个示例中,组件使用默认的积极变化检测策略来监控并更新其hero列表中每个英雄的显示。...虽然你没有得到你想要的行为,但Angular并没有被破坏。 它只是使用不同的变更检测算法,忽略对列表或其任何项目的更改。...AsyncPipe也是有状态的。 管道保持对输入Stream的订阅,并在到达时保持该Stream的值。 下一个示例使用异步管道将消息字符串(message)Stream绑定到视图。

    6.4K20

    文档和元素的几何滚动

    重置触发的事件 当用户单击重置按钮,将会触发onreset事件。...即使用this.form.x 按钮 拥有两种方式,该两种方式都会生成按钮。 超链接与按钮一样提供了onclick事件处理程序。...开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态的按钮。即选中或未选中。通过对其单击,用户可以改变其开关状态。...单选元素为整组有相关性的元素而设计的,组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时,它返回的一个类数组对象而不是单个元素。...当用户单击按钮,会触发onclick事件,由于改变状态会触发onchange事件,但是,当用户单击其他单选按钮而导致这个单选按钮状态的改变,后者不触发onchange事件。

    5.2K00

    Angular 显示英雄列表

    在本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...在教程的第一章,你曾在 styles.css 中为整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。...把显示英雄详情的 HTML 包裹在一个  中。 并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4.4K70

    AngularDart4.0 英雄之旅-教程-07路由 顶

    要在其他地方导航,用户可以单击AppComponent中的两个链接之一,或单击浏览器的后退按钮。...现在添加第三个选项,一个goBack()方法,使用您之前注入的Location服务在浏览器的历史堆栈中向后导航一步。...当用户从列表中选择一个英雄时,他们不会进入详细页面。 相反,他们会在此页面上看到一个迷你细节,并且必须单击一个按钮才能导航到完整的详细信息页面。...警告在模板中使用Angular管道之前,需要将其列在组件的@Component注解的pipes参数中。 您可以单独添加管道,或者为了方便起见,可以使用COMMON_PIPES组。...你所要做的就是定义它的风格。 应用程序全局样式 将样式添加到组件时,可以将组件需要的所有内容(HTML,CSS和代码)一起放在一个方便的位置。 把它打包起来很容易,在其他地方重新使用组件。

    17.6K30

    Angular 显示英雄列表

    在本页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...在教程的第一章,你曾在 styles.css 中为整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。...把显示英雄详情的 HTML 包裹在一个  中。 并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。...点击一个英雄,它的详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示在列表中,当你单击英雄的名字的时候,有关你单击英雄的详细信息就显示在页面的底部了。...用户可以选择一个英雄,并查看该英雄的详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。

    4K30

    【玩转腾讯云】手把手教你使用VueReactAngular三大框架开发Pagination分页组件

    3.3 Angular版本 和Vue/React这种专注View视图层的轻量级框架不同,Angular是一个很重的框架,配备非常完整,Web开发过程中你需要的一切,Angular框架都给你提供好了,你只需要随手取用即可...和Vue/React的差别比较大: 一是外部传参方式不同,Angular使用@Input这个装饰器表示外部参数; 二是Angular使用ngFor指令渲染列表数据; 三是Angular优化DOM对比的方式是使用...,我们在data内部状态中还定义了一个dataList字段,用于动态传入给List组件,达到分页的效果。...useState会返回一对值:当前状态和一个让你更新它的函数。...先梳理下更多按钮的显示逻辑: 中间按钮一共5页,加上首尾按钮2页,一共7页,也就是说只有大于7页,才有可能显示更多按钮; 左右更多按钮会随着当前页码的不同而显示或隐藏,以第4页和倒数第4页为界; 当页码大于第

    7.8K00

    Angular 6.x 基础教程

    ,若我们改变绑定的表达式为 (click)="onClick(myInput)" ,当我们点击按钮时,控制台输出的结果是: 通过该输出结果,我们可以知道 #variableName...ngFor 指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...第七节 - 使用 Input 装饰器 为了让我们能够开发更灵活的组件,Angular 为我们提供了 Input 装饰器,用于定义组件的输入属性。...用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass 。...对于一些场合,我们也可以直接利用 Angular 属性绑定的语法,来快速设置元素的样式。

    15.6K20

    Travis CI 教程:入门

    iOS 模拟器屏幕截图 2015 年 7 月 11 日,下午 9.46.21 使用选择器从当前日期选择一个不到一个月的日期,然后点击 “* 创建任务”* 按钮。你会看到以下内容: ?...接下来,单击绿色的大绿色 存储库 按钮。您将看到一个页面,说明如何将代码提供给 GitHub。 ?...travis_permissions Travis 需要访问读写 Webhooks,服务和提交状态。这样它就可以创建自动 “钩子”,它需要在你想要的时候自动运行。 单击绿色的 “授权应用程序” 按钮。...由于单元格被重用,因此在重新使用单元格之前清除这些变量的值,方法是重写 prepareForReuse() 并将每个值重置为 nil: public override func prepareForReuse...确保所有内容都得到更新 - 从复选框开始,通过验证其状态是否已更新,然后等待满足期望,以确保使用新值更新委托。 建立测试,但不要运行它 - 是时候懒惰,踢回去,让 Travis 为你做。

    5.1K21

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    它现在主要是组件。该组件是Angular世界中最基本的构建块。我们来看看Angular CLI为我们生成的代码。 首先,这里是index.html: Angular为我们提供了一些糖语,我们可以在这里使用它,所以我从另一个角度开始解释糖的工作原理。...State是一个单一的,不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...因此,它更像是一套约定(对于那些曾经听说过Ruby on Rails中的约定优先配置的用户,稍后会看到一些相似之处),以便我们回答我们的应用程序应该如何决定它需要显示一些界面元素(如可折叠的侧边栏),或者它应该在从服务器接收到它的会话状态后存储它的位置...如果我们About在应用程序中需要一个页面会怎么样 我们如何将它添加到我们当前的代码库?显然,该页面应该是一个组件(与Angular中的其他内容一样)。我们来生成这个组件。

    42.7K10

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

    您只需声明绑定源和目标HTML元素之间的绑定,然后让框架完成工作。 Angular提供了多种数据绑定。 本指南涵盖了大部分的Angular数据绑定及其语法的高级使用。...设置按钮的disabled属性(Properties)(例如,使用Angular绑定)禁用或启用按钮。属性(Properties)的值很重要。...一个没有属性的世界 在Angular的世界中,属性(attributes)的唯一作用是初始化元素和指令状态。...它在显示它们之前清理这些值。 它不允许带脚本标记的HTML泄露到浏览器中,既不能使用插值也不能使用属性绑定。 一个点(.)和属性名称代替括号之间的元素属性。然后使用解析为字符串的表达式来设置属性值。

    5.2K10

    VBA专题10-23:使用VBA操控Excel界面之添加动态菜单

    另一个允许动态填充其内容的控件是组合框控件。 动态菜单控件可以在运行时做更多的事,是唯一一个其内容的结构可以在运行时改变的控件,可以包含自定义控件和内置控件——包括其他动态菜单。...下面介绍一个简单的使用动态菜单控件示例,在工作簿中为三个工作表(名为Data,Analysis,Reports)的每个显示不同的菜单。 1. 创建一个新的工作簿,将其保存为启用宏的工作簿。 2....复制并粘贴下面的XML代码: image.png group元素不仅能够包含动态菜单,而且还可包含其他控件。 6. 单击工具栏中的Validate按钮检查是否有错误。 7. 保存并关闭该文件。...当重新激活工作表Data时,通过调用GetMenuContent过程会重新创建菜单,而复选框会重置为其默认值(即,取消勾选条件)。...当VBE显示标准的错误消息框(因为一个未处理的运行时错误发生),可以单击消息框中的结束按钮。 关闭该工作簿文件。 如果没有未处理的错误,你可以只执行前两种方法,而用户可以仅执行最后一种方法。

    6.2K20
    领券