角度多个复选框值

Question

学生想要注册一门或多门课程。由于类列表是动态的，因此我使用 ngFor 以表格格式显示，最后带有复选框以选择类。但是，当学生复选框选择班级时，不知道如何获得价值。

我曾尝试使用选择选项，但效果不佳。

<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>

我希望当学生注册任何班级时，班级容量将减少一个并更新到 firebase 数据库。

Answer 1

由于您有多个复选框，因此您需要一个数组来跟踪这些复选框。

组件：

checkboxes = [];

使用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);
}

模板：

在模板中，将每个复选框绑定到各自的值。

<tr *ngFor="let item of classItem; let i = index">
  ...
  <ion-checkbox style="text-align: center;" (onchange)="checkboxChange(i)"
    [(ngModel)]="checkboxes[i]"></ion-checkbox>
  ...
</tr>

当一个复选框被选中或取消选中时，修改类的可用容量。

checkboxChange(i) {
  if (this.checkboxes[i]) {
    this.capacity++;
  } else {
    this.capacity--;
  }
}

Answer 2

这是我对您问题的解决方案。首先，我在具有 ClassDescription 接口的 ClassDescription 类型的 checkItem 数组中添加了带有模拟数据的组件 ts 文件。 请注意，我使用的是普通的 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>

我的 Stackblitz 解决方案在这里Stackblitz solution。接下来，您可以在 onChecked 函数中添加 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 
     }
     ];


    }

Answer 3

<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>

在你的 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
 }
}

预计在您的classItem 中有一个checked 属性，全部初始化为false

即你的classItem 应该是类型：

interface ClassType {
code : string; 
name : string ; 
capacity: string ; 
remaining : number ; 
location : string ; 
instructor : string; 
checked: boolean; 
}