[英]Angular multiple checkbox value
A student wants to register one class or more than one class.学生想要注册一个 class 或多个 class。 As the class list is dynamic, I have used ngFor to display in a table format with checkbox at then end to select the class.
由于 class 列表是动态的,我使用 ngFor 以表格格式显示,然后在 select class 结尾处带有复选框。 But, no idea how to get value when a student checkbox to select class.
但是,不知道如何在学生勾选 select class 时获得价值。
I have tried to use the select option but that didn't go through well.我曾尝试使用 select 选项,但 go 并没有通过。
<div>
<table align="center" >
<tr class="heading" >
<th style="padding: 5px;">Code</th>
<th style="padding: 5px;">Name</th>
<th style="padding: 5px;">Capacity</th>
<th style="padding: 5px;">Remaining</th>
<th style="padding: 5px;">Location</th>
<th style="padding: 5px;">Instructor</th>
<th style="padding: 5px;">Register?</th>
</tr>
<tr *ngFor="let item of classItem">
<td style="border-right-style: dashed;">{{ item.Code }}</td>
<td>{{ item.Name }}</td>
<td>{{ item.Capacity }}</td>
<td>{{ item.Remaining }}</td>
<td>{{ item.Location }}</td>
<td>{{ item.Instructor }}</td>
<td>
<ion-checkbox style="text-align: center;" (onchange)="checkboxChange()" [(ngModel)]="checkItem"></ion-checkbox>
</td>
</tr>
</table>
I expect when student register for any class then, capacity of class will be reduced by one and update to firebase database.我希望当学生注册任何 class 时,class 的容量将减少 1 并更新到 firebase 数据库。
Since you have multiple checkboxes, you need an array to keep track of these checkboxes.由于您有多个复选框,因此您需要一个数组来跟踪这些复选框。
Component:零件:
checkboxes = [];
Initialize all checkboxes with false
to keep them unchecked at the beginning.用
false
初始化所有复选框以保持它们在开始时未选中。
ngOnInit() {
// This array will be the same length as the iterable object used in *ngFor.
this.checkboxes = new Array(this.classItem.length).fill(false);
}
Template:模板:
In the template, bind each checkbox to their respective value.在模板中,将每个复选框绑定到它们各自的值。
<tr *ngFor="let item of classItem; let i = index">
...
<ion-checkbox style="text-align: center;" (onchange)="checkboxChange(i)"
[(ngModel)]="checkboxes[i]"></ion-checkbox>
...
</tr>
When a checkbox is checked or unchecked, modify available capacity of the class.选中或取消选中复选框时,修改 class 的可用容量。
checkboxChange(i) {
if (this.checkboxes[i]) {
this.capacity++;
} else {
this.capacity--;
}
}
Here is my solution to your problem.这是我对您的问题的解决方案。 Firstly I added component ts file with mock data in checkItem array of type ClassDescription with ClassDescription interface.
首先,我在具有 ClassDescription 接口的 ClassDescription 类型的 checkItem 数组中添加了带有模拟数据的组件 ts 文件。 Note that I have used normal html input checkbox instead, I just verified on ionic documentation and it will work same as below reference of
Ionic Checkbox
请注意,我使用的是普通的 html 输入复选框,我刚刚在 ionic 文档上进行了验证,它将与下面的
Ionic Checkbox
参考相同
<table align="center" >
<tr class="heading" >
<th style="padding: 5px;">Code</th>
<th style="padding: 5px;">Name</th>
<th style="padding: 5px;">Capacity</th>
<th style="padding: 5px;">Remaining</th>
<th style="padding: 5px;">Location</th>
<th style="padding: 5px;">Instructor</th>
<th style="padding: 5px;">Register?</th>
</tr>
<tr *ngFor="let item of classItem">
<td style="border-right-style: dashed;">{{ item.code }}</td>
<td>{{ item.name }}</td>
<td>{{ item.capacity }}</td>
<td>{{ item.remaining }}</td>
<td>{{ item.location }}</td>
<td>{{ item.instructor }}</td>
<td>
<input type="checkbox" [(ngModel)]="item.register" (change)="onChecked(item)"
[disabled]="(item.remaining === 0) && item.register == !true">
<br>
</td>
</tr>
</table>
My Stackblitz solution is here Stackblitz solution
.我的 Stackblitz 解决方案在这里
Stackblitz solution
。 Next you can add your logic for firebase inside onChecked function.接下来,您可以在 onChecked function 中添加 firebase 的逻辑。
import { Component } from '@angular/core';
interface ClassDescription {
code : string;
name : string ;
capacity: string ;
remaining : number ;
location : string ;
instructor : string;
register: boolean;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
onChecked(item) {
if(item.register)
{
item.remaining = item.remaining - 1 ;
}
else{
item.remaining = item.remaining + 1 ;
}
}
classItem: ClassDescription[]= [
{
'code' : '101',
'name' : 'Micro services',
'capacity': '30',
'remaining' : 5 ,
'location' : 'Engineering dept',
'instructor' : 'Dr. Neha',
'register': false
},
{
'code' : '102',
'name' : 'Computer Science',
'capacity': '30',
'remaining' : 0 ,
'location' : 'Mcarthy hall',
'instructor' : 'Dr. Rob',
'register': false
},
{
'code' : '103',
'name' : 'Programming fundamental',
'capacity': '30',
'remaining' : 5 ,
'location' : 'Harvard hall',
'instructor' : 'Dr. Steven',
'register': false
}
];
}
<table align="center" >
<tr class="heading" >
<th style="padding: 5px;">Code</th>
<th style="padding: 5px;">Name</th>
<th style="padding: 5px;">Capacity</th>
<th style="padding: 5px;">Remaining</th>
<th style="padding: 5px;">Location</th>
<th style="padding: 5px;">Instructor</th>
<th style="padding: 5px;">Register?</th>
</tr>
<tr *ngFor="let item of classItem;let i = index">
<td style="border-right-style: dashed;">{{ item.code }}</td>
<td>{{ item.name }}</td>
<td>{{ item.capacity }}</td>
<td>{{ item.remaining }}</td>
<td>{{ item.location }}</td>
<td>{{ item.instructor }}</td>
<td>
<ion-checkbox style="text-align: center;" (ionChange)="checkboxStateChanged(i)" [checked]="item.checked"></ion-checkbox>
</td>
</tr>
</table>
in your ts:在你的 ts 中:
classSelectedIndexes : number[] = []; //storing the selected item indexes just in case
checkboxStateChanged(index : number){
this.item[i].checked= !this.item[i].checked;
if(this.item[i].checked){
//do something if true
}
else{
//do something if false
}
}
It is expected to have a checked
property in your classItem
all initialized to false
预计您的
classItem
中的已checked
属性全部初始化为false
ie your classItem
should be of type:即你的
classItem
应该是类型:
interface ClassType {
code : string;
name : string ;
capacity: string ;
remaining : number ;
location : string ;
instructor : string;
checked: boolean;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.