如何访问由*ngFor loop - Angular索引的复选框的checked属性
在Angular中，ngFor指令用于循环渲染模板中的元素。如果要访问由ngFor循环生成的复选框的checked属性，可以通过以下步骤实现：
- 在组件的模板文件中，使用*ngFor指令循环生成复选框，并绑定一个布尔类型的属性到每个复选框的checked属性上。例如：
<div *ngFor="let item of items; let i = index">
<input type="checkbox" [checked]="isChecked[i]" (change)="toggleCheckbox(i)">
{{ item }}
</div>- 在组件的类文件中，定义一个布尔类型的数组isChecked，并初始化为与items数组长度相同的空数组。例如：
export class MyComponent {
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
isChecked: boolean[] = [];
constructor() {
this.isChecked = new Array(this.items.length).fill(false);
}
toggleCheckbox(index: number) {
this.isChecked[index] = !this.isChecked[index];
}
}- 在组件的类文件中，定义一个toggleCheckbox方法，用于切换isChecked数组中对应索引位置的布尔值。
通过以上步骤，我们可以实现访问由*ngFor循环生成的复选框的checked属性，并通过isChecked数组来跟踪每个复选框的选中状态。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
在我的Angular 7应用程序中，我有一个复选框集合，它位于没有(ngModel)的*ngFor中。在这里，我如何在不使用ngmodel的情况下获取复选框状态，无论它是否被选中。 我尝试过$event，但它总是能实现。找到下面我的代码，给出没有(ngModel)的任何好的解决方案。 <div *ngFor="let country of addedValue | keyvalue; let in = index; ">
<div>
<input type="checkbox"
浏览 7提问于2019-02-05得票数 0
回答已采纳
我试着把选中的复选框放在最上面，如果我在五个checkboxes(12345)中选择了第四个复选框，结果应该是(41235)，请帮助我为您提供参考，我已经添加了工作到现在为止，并添加链接。
TS文件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css
浏览 0提问于2021-09-07得票数 0
ngModal在使用ngFor中的复选框时似乎不起作用，同时重复以下对象的数组
{“已检查”：真}，{“检查”：假}
如果我们从组件中将选中的属性更改为true或false，它不会反映在UI中，同样的逻辑也适用于md引导程序的mdb复选框。
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ '
浏览 0提问于2019-01-18得票数 2
回答已采纳
2回答
我在Angular2中有一个简单的自定义管道来过滤基于ID和年份数组的数组，我将其定义为：
@Pipe({name: 'highlightedWorksFilter', pure: false})
export class HighlightedWorksFilterPipe implements PipeTransform {
transform(works: IHighlightedWork[], activityTypeIds: any[], activityYears: any[]){
if (works && works.length) {
浏览 4提问于2017-07-06得票数 0
回答已采纳
我在我的组件中有一个@Input，基于它我想构建一个input和复选框。 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-aside',
templateUrl: './aside.component.html',
styleUrls: ['./aside.component.css']
})
export class AsideComponent
浏览 8提问于2020-12-18得票数 1
我不知道！
我在ngFor中有几个与ngFor绑定的复选框，但是如果我的标记被包装在<form>标记中，UI会意外地工作。例如，[checked]="team.original“和[disabled]="!group.internal"不工作--它应该这样做。
谢谢!
编辑：
例如，您是否看到checked="team.original“和”disabled="!group.internal“它们不按照它的值工作。对于‘原始’列，我打印实际值- 'false‘，但chackbox被选中。
浏览 3提问于2017-02-26得票数 2
回答已采纳
我有几个来自ngFor的复选框。我有一个按钮，这是禁用的加载。如果我只选中/取消选中其他复选框(未选中)，按钮将被启用。如果取消选中，将启用任何选中的复选框按钮。如果我再次选择back selected，复选框按钮将被禁用。下面是https://stackblitz.com/edit/angular-mthf93?file=src%2Fapp%2Fapp.component.html的代码 app.component.html <hello name="{{ name }}"></hello>
<p>
Start editing to
浏览 26提问于2021-04-07得票数 0
回答已采纳
我正在使用ngFor构建我的复选框 <ng-container *ngFor="let cb of (myList$ | async)">
<mat-checkbox
[value]="cb.name"
[checked]="cb.checked"
(change)="checkboxChange($event)" // only giving single value
>{{ cb.name }}</mat-checkb
浏览 9提问于2019-02-18得票数 2
回答已采纳
1回答
我正在尝试创建复选框，这些复选框在选中时将对象添加到数组中，但在未选中时将删除该对象。我不确定这是否是正确的方法，但我将在下面显示我所拥有的。顺便说一下，使用Angular 2。
原始代码：
<div>
<ul>
<a *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
<li>{{ perkResult.perk }}</li>
</a>
<
浏览 21提问于2018-01-05得票数 2
1回答
嗨，当我开发一个页面时，我遇到了一个要求，它有相同级别的父复选框，每个父复选框都有他们的孩子，这也是复选框。所以我需要当parent被选中时，他们各自的孩子也应该被选中，如果我取消选中，那么应该发生取消选中。这是我的html & component文件。一切都很好，但是当我点击一个父母的孩子复选框，然后点击不同的父母，然后它就变得一团糟。任何帮助都将不胜感激!！ import { Component } from '@angular/core';
import { Input, OnInit, OnDestroy, ViewChildren, ViewChild,
浏览 11提问于2018-12-23得票数 0
当选中div旁边的复选框时，我尝试设置div的背景色。
复选框放在自己的div中，我要更改的div就在它旁边。
我有一个复选框，它会切换所有其他的复选框，如果我切换那个复选框，它会切换所有div的颜色，但是我也希望单独地为相邻的div设置它。
到目前为止，这就是我所拥有的：
<div class="select-all-checkbox">
<input type="checkbox" name="all" checked [checked]="isAllSelected" (change)="isS
浏览 1提问于2018-10-17得票数 0
回答已采纳
3回答
我想要创建一个动态表，它可以添加我已经完成的行&列，然后从表中删除所选的列。这里是我的Stack > 如何使用复选框删除该列，如果我选择了5个复选框，那么应该删除5列。
HTML文件
<div class="main-content">
<mat-accordion>
<!-- Expansion Pannel One Starts Here -->
<mat-expansion-panel>
浏览 1提问于2019-04-12得票数 2
回答已采纳
4回答
以下是我之前的问题：
我能够修正上一个问题中的错误。现在，我有了一个复选框列表，其中我想取消选中的复选框的标签点击。就像这样：。
下面是我的代码
categories.component.html
<input [(ngModel)]="searchText" placeholder="search text goes here">
<span class="filter-clear" *ngIf="searchText.length>0" (click)="clearFilter()"
浏览 0提问于2018-04-03得票数 0
回答已采纳
我正在尝试使用ngfor生成一个复选框列表。一切正常，但如果我选中了第一张卡片行的第一个复选框，它似乎认为我选中了第一张卡片行的第一个框。
这里有一个小小的gif演示了这个问题。
<div *ngFor="let task of taskdata" class="card" >
<div *ngIf="task.task1" class="custom-control custom-checkbox">
<input type="checkbox" cla
浏览 0提问于2018-06-17得票数 0
回答已采纳
我有一个由ngFor循环和reset按钮生成的复选框列表。单击reset按钮时，如果选中了任何复选框，我想取消选中它们。
这是我的html
<li *ngFor="let item of listItems" class="filter-list__item">
<label class="filter-list__itemLabel">
<input type="checkbox" value="{{item.id}}" [checked]="chec
浏览 0提问于2016-10-21得票数 2
我对反应性表单很陌生，并且很难动态地将复选框的值设置为true。下面是一个示例:我从db中获取特定用户预选的水果值，当用户加载页面时，需要检查这些水果。
我使用以下html代码：
<ng-container>
<div class="form-check form-check-inline" style="display: block;" *ngFor="let control of fruitsArray.controls; let i = index;">
<input *ngIf="i<11&
浏览 2提问于2020-10-30得票数 0
回答已采纳
1回答
我正在处理一个angular 4项目，我需要创建一个结构，其中有三个复选框。一旦第一个复选框被选中，就应该动态地创建一个选项卡，所以按照那个逻辑，如果我选择了所有三个选项卡，那么将有三个选项卡，问题如下:我需要在任何给定的时间点选择一个选项卡，所以假设如果第一个复选框被选中，那么第一个选项卡应该被预先选中，如果第一个复选框未被选中，那么第二个选项卡应该是selected..any help，这方面将非常感谢。谢谢!
为了更好地理解，我创建了一个柱塞示例：
Html代码：
<div *ngFor="let industry of industries">
浏览 0提问于2017-10-17得票数 0
我在使用Angular Material checkbox组件时遇到问题。当我单击复选框时，复选框会向上移动，因此只显示复选框的一半。
有谁有解决这个问题的办法吗？
<table class="material-table">
<thead>
<tr>
<th>Title</th>
<th>checked</th>
</tr>
</thead>
<tbody>
浏览 0提问于2018-04-09得票数 0
1回答
我正在尝试验证与我的列表数据相关的复选框。我想要检查列表中的所有复选框是否被选中。
<li class="checkbox-wrap" *ngFor="let data of setupData">
<span *ngFor="let groupdata of data.groupTypes">
<span *ngFor="let servicedata of groupdata.printServices">
<md-checkbox
浏览 0提问于2018-09-03得票数 0
回答已采纳
3回答
我有一个带有这些复选框的表单，以便用户可以选择一个项目的多个“口径”：
这些校验框是通过ngFor从一个名为“杯”的数组创建的，该数组具有所有可能的值，如下面的代码所示：
component.html
<div >
<mat-checkbox #checkBox
*ngFor="let calibre of calibres; let i = index"
[value]="calibre"
(change)="getCheckbox()"
class="ex
浏览 1提问于2020-05-07得票数 2
回答已采纳
我是angular的新手，我想在textarea的readonly属性的基础上使用复选框的选中状态。 <div fxlayout="row" fxLayoutAlign="center center" *ngFor="let test of cosmetriTests.controls; let i=index" [formGroupName]="i">
<mat-form-field class="w-25-p" appearance="outline" >
浏览 40提问于2019-02-15得票数 0
回答已采纳
如果复选框被选中，我需要获取复选框的标签值。
如何在选中时传递标签值？
<div *ngFor="let list1 of list['data']">
<div class="form-group col-sm-12">
<div class="row">
<div *ngFor="let CheckBoxOptions of list1['sample']">
<label
[fo
浏览 1提问于2018-08-31得票数 0
我有一个使用*ngFor循环从另一个数组获取数据的输入元素。在选中多个复选框时，我需要将它们的值推入我的空数组'selectedArr‘中。在下面的代码中找到：
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppCompo
浏览 0提问于2020-03-10得票数 1
这是我的html代码
<tr *ngFor="let Resolution of Resolutions">
<td>{{Resolution.steps}}</td>
<td>
<div class="col-sm-10 ">
<div *ngFor="let Suggestion of Resolution.Suggestions">
<label >
<inpu
浏览 6提问于2016-07-29得票数 1
1回答
我在使用angular2 (测试版17)的时候遇到了一个奇怪的问题。
我正在尝试设置与元素具有数组并绑定更改或单击事件相同的复选框。
例如，我有一个数组：
myObjects=[
{value:true},
{value:true},
{value:false},
{value:true}
];
我使用ngFor来创建所有的复选框：
<div *ngFor="let myObject of myObjects; let i = index" >
<input
type="checkbox
浏览 0提问于2016-05-05得票数 2
我正在尝试将Angular 1应用程序转换为Angular 2。循环遍历布尔值(boolean[][])的锯齿数组。我使用以下代码呈现checkboxes：
<div *ngFor="#cell of CellData; #parentIndex = index">
<input *ngFor="#col of cell; #childIndex = index" type="checkbox" [(ngModel)]="CellData[parentIndex][childIndex]" />
浏览 0提问于2016-04-07得票数 16
回答已采纳
我想检查数组中是否存在一个值，如果存在，则返回true，如果不存在于angular复选框输入字段中，则返回false。
以下是代码
<div style="margin-left: 20px;" *ngFor="let li of permissions;">
<nz-form-item *ngIf="li.entity === 'Staffs'">
<nz-form-control style="margin-bottom: -25px;
浏览 0提问于2021-03-31得票数 0
3回答
在我的角度应用程序中，我正在做一个复选框，捕获复选框更改事件，并将选中的值推入数组中。
在这里，如果取消选中复选框，也会将obj推送到数组中。
如何从数组中删除 obj如果取消选中复选框
Html：
<div *ngFor="let item of order; let i = index">
<input type="checkbox" [id]="item+i" [name]="item"[(ngModel)]="item.Checked" (change)="getCheckbo
浏览 0提问于2018-11-26得票数 1
回答已采纳
我在ngFor循环中有复选框，当我单击任何一个复选框时，只有第一个复选框被选中&未选中，只更新第一个复选框的状态。
HTML模板：
<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox">
<input type="checkbox" id="check" name="num.value" value="num.checked" [(ng
浏览 2提问于2018-05-11得票数 1
回答已采纳
1回答
如何初始化和操作复选框值？我看过很多例子，但都没能奏效。
我试图显示一个N x M表，其中行表示任务，列代表学生。这样做的想法是，检查表格中的一个复选框，为学生分配一项任务。
有一个类型记录散列图，其中包含所有checkboxes的值；
assigned : { [key:string]:boolean; } = {};
散列键是：
var key = a.TaskId + '_' + a.StudentId;
表是用嵌套的ngFor生成的：
<tr *ngFor="let t of tasks">
<td>Task Name
浏览 1提问于2016-12-03得票数 0
回答已采纳
我是Angular 4.x的新手。我有一张html表格。每行都有一个复选框和一个复选框。我想绑定复选框与按钮，这样当复选框被选中时，按钮被启用，而当复选框未被选中时，按钮被禁用:下面是一个代码示例，但它不起作用：
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" value="" [checked]="item.checked"><
浏览 0提问于2017-05-22得票数 2
我想在Angular上使用ngFor显示一个数组(我正在使用Angular 6)。我希望能够通过点击结尾处的复选框来选择我的一些汽车，当我按下按钮时，我将购买所选的汽车。
列表显示了alrigh，复选框也是如此，但我真的不知道如何轻松地检索选定的汽车。你能帮上忙吗？我已经尝试了我在StackoverFlow上找到的一些例子，但没有成功
我不想去碰仅包含3个字段(id、品牌和价格)的汽车型号。
<thead>
<button type="button" click="buySelectedCars()">BUY</button>
浏览 0提问于2019-02-12得票数 0
我试图创建一个组件，允许用户使用表接口选择要在“测试”上执行的操作。表的每一行都是一个单独的子组件，其父组件由使用*ngFor创建的表头和子组件行组成。
一切都进行得很顺利，除了我需要标题中的复选框检查所有子组件复选框，并在标头中选择选择所有子组件，以与标头中选择的选项相等。复选框看起来工作正常(在柱塞中演示)，但是父组件中的事件处理程序在选中标头复选框时不会获得更新的复选值，而是在选中实际行的复选框时得到更新的复选值。演示有复选框，将内容打印到控制台。我希望标题复选框会触发所有复选框的“选中”事件，并将多个语句打印到控制台(每一行两行)。
我开始将选项放在适当的位置来处理标头的选择更改，但是
浏览 1提问于2016-07-20得票数 0
回答已采纳
2回答
嗨，我对这个角度很陌生，我正在尝试创建一个anuglar复选框过滤器管道来过滤我的产品数据！这里我已经在我的.ts文件中为复选框创建了一个颜色(我没有包括与这个问题无关的代码)。
public colors: any[] = [
{
id: 1,
color: "Black",
selected: true,
},
{
id: 2,
color: "Green",
selected: true,
}
]
我用烟斗做复选框-
import { Pipe, PipeTransform } from '@angular/core'
浏览 1提问于2018-05-31得票数 0
回答已采纳
我有一个数组，叫做dataArray，它有100个项目。我最初使用ngFor来显示100个复选框。有一个按钮可以加载下100个项目。在点击这个按钮，我会追加100多个项目到dataArray，这个dataArray应该有200个项目。我的问题是，Angular是否会再次运行ngFor循环来构建第二组项目(包括前100项)，或者它是否足够智能地只循环第二组项目(只有100项)并将它们附加到现有的DOM中？
浏览 7提问于2017-08-22得票数 0
回答已采纳
4回答
在我的angular应用中。我有多个复选框。我想使用on checkbox来选择和取消选择所有剩余的复选框。我的数据来自后台。请指导mo如何实现它。
HTML
<ul>
<li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
</li>
<li *ngFor="let n of names">
<input type="checkbox&
浏览 0提问于2020-08-18得票数 1
2回答
我有以下标记：
<table>
<thead>
<th *ngFor="let column of columnNames">
<ng-container *ngIf="column === 'Column6'; else normalColumns">
{{column}} <input type="checkbox" #chkAll />
</ng-container>
<ng-temp
浏览 2提问于2018-09-25得票数 4
回答已采纳
在我的ngFor循环中，我要添加多个复选框，所有复选框都会添加。但是它的行为就像radio按钮。我一次只能选择一个复选框。这里怎么了？有人帮我吗？
这是我的模板：
<div class="vas-obs vas-selected" *ngFor="let vas of vasDatas;let i=index;">
<div class="vas-obs-text checkbox-container">{{appProps[vas.title]}}
<input type
浏览 1提问于2018-05-30得票数 0
回答已采纳
因此，在我的angular 5应用程序中，我有以下代码：
<div *ngFor='let part of (post.student | async).get("qcm")'>
<mat-checkbox>this can't be checked in or checked out</mat-checkbox>
</div>
post.student的类型为PromiseObservable。
post.student | async的类型为DocumentSnapshot ( Fires
浏览 3提问于2018-05-03得票数 0
我正在开发angular2应用程序。在我的要求中，使用数组创建多个复选框，最后一个复选框被选中，所以如果最后一个复选框未选中，请显示div，因此隐藏div。
Component.ts:-
peoples: any = [
{ "name":"rahul", "status":false},
{ "name":"rija", "status":false},
{ "name":"roy", "status":false},
{ "name
浏览 0提问于2017-07-18得票数 1
回答已采纳
1回答
我创建了一个角的应用程序，用于获取所有复选框值，这些复选框值被签入数组中，没有任何循环，但是在同时检查和取消检查之后，我在数组中得到了错误的数据。
有人能给我一些解决办法吗？
var app = angular.module('checkbox', []);
app.controller('homeCtrl', function ($scope) {
$scope.selected = [];
$scope.array_ = angular.copy($scope.array);
$scope.list = [{
&#
浏览 2提问于2014-08-08得票数 0
回答已采纳
1回答
我正在创建一个Angular2项目，并且对复选框的双向绑定有问题。
我有一个名为listItem的类，如下所示：
export class ListItem {
public count: number;
public value: string;
public checked: boolean;
constructor(count: number, value: string, checked: boolean) {
this.count = count;
this.value = value;
this.checked = checked;
}
浏览 1提问于2017-06-06得票数 3
回答已采纳
我有一些具有父-子结构的复选框，它们的值来自loop.Here当我单击submit按钮时，我需要将选中/未选中的值捕获为下面的格式(提到为注释输出)。当我点击提交的预选值是正常的，但如果我取消选中html(页面加载时未选中)，并单击提交时间，它显示空的array.As根据我的要求在项目中有时所有的复选框将被预先选中，有时几个选中/几个未选中，有时所有将被取消选中基于条件，我需要捕获选中/未选中的值(与输出相同)在提交时。以下是Demo - 的代码
app.component.html
Checkbox -
<div class="col-md-3" id=&#
浏览 13提问于2019-11-16得票数 0
5回答
我正在尝试将默认值设置为在我的ngFor中的复选框上选中的。这是我的复选框项数组：
tags = [{
name: 'Empathetic',
checked: false
}, {
name: 'Smart money',
checked: true
}, {
name: 'Minimal help after writing check',
checked: false
}, {
name: 'Easy term sheet',
checked: true
}];
这是我的html
<di
浏览 9提问于2017-07-13得票数 10
回答已采纳
我在html中设置了一个表单，如果复选框为checks，则允许用户编辑个人资料。到目前为止，我使用了一个ngFor循环来用数据填充页面。问题是，如果我按下复选框，返回数据中的每一项都是可编辑的。
html如下所示：
<ul class="profiles">
<li *ngFor="let profile of profiles">
<ngb-panel title="Profile ID: {{profile.id}}">
<ng-temp
浏览 17提问于2018-08-07得票数 0
当单击复选框和event.target.checked === true时，在下表中，我将headerName和单元格推入数组，但当event.target.checked === false时，无法删除该项，因为我没有添加项的索引。任何解决这一问题的线索都将不胜感激。
component.ts
import { Component, VERSION } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
浏览 3提问于2021-03-16得票数 1
1回答
限制复选框选中的计数为5
、、、
我有20个复选框，我需要能够将选中复选框的数量限制在5/20。根据选中的复选框，它应该隐藏/显示标签。
在选中5之后，不应该再选中更多，在取消选中5或任何后续的时候，它应该允许我再次选中一个不同的框，直到限制为5。
我的复选框是使用angular指令*ngFor生成的，到那时将有5个答案，因此从5个检查开始。
<div *ngFor="let question of questions; let i = index" class="row container-generic">
<div class="col-md-
浏览 1提问于2017-07-19得票数 1
回答已采纳
1回答
比较字符串角6的动态数组
、、、
我有两个字符串数组。其中之一是复选框的动态列表。我想检查项目是否存在于另一个数组中。我如何使用angular 6动态完成这项工作？ 这是复选框列表的当前情况...检查需要是动态的. <div *ngFor="let p of people">
<mat-checkbox class="example-margin secondary-text"
[checked]="false" >p</mat-checkbox>
</div>
浏览 21提问于2019-01-14得票数 1
4回答
Angular 10点击事件传播
、、、、
我想手动修改输入复选框的值，方法是在其html父对象上单击everywhere。
这是我的HTML：
<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
<input type="checkbox" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
&l
浏览 4提问于2020-11-15得票数 0
我有一个Angular 2应用程序，它有一个列中有复选框的表。当用户单击复选框时，将出现一个模式，其中包含有关该行的更多详细信息。但是，我只想在选中复选框的情况下显示模式。这是我现在所拥有的：
<tr *ngFor="let item of searchItems">
<td><input type="checkbox" name="rowCheckbox" (click)="setSelectedRow(item);modal.show();" /></td>
...
&l
浏览 1提问于2018-01-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
