Angular 角度倍数复选框值

学生想要注册一个班级或多个班级。由于类列表是动态的，所以我使用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>

代码
名称
容量
剩下的
位置
教练
登记
{{item.Code}
{{item.Name}
{{item.Capacity}
{{item.Remaining}
{{item.Location}
{{item.讲师}

---

我预计当学生注册任何课程时，课程的容量将减少一个，并更新到firebase数据库。

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

组件：

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

模板：

checkboxes = [];

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

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

---

这是我解决你问题的办法。首先，我在带有ClassDescription接口的ClassDescription类型的checkItem数组中添加了带有模拟数据的组件ts文件。 请注意，我使用了普通的html输入复选框，我只是在ionic文档上进行了验证，它的工作原理与下面的参考相同

您的

classItem

中应选中

属性，所有属性均初始化为
false

i、 e您的
classItem
应为以下类型：

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

我在另一个页面中有容量变量，如何链接到此页面？@RaviShankarShah-如果您在父组件中有该变量，则可以通过使用事件发射器发送数据来更新它。有关更多信息，请参见此。如果组件不相关，那么请查看使用服务的组件之间的通信。如果你遇到这个问题，问一个新的问题，因为它与这个复选框问题无关。如果你认为其中任何一个回答都回答了你的问题，那么你可以考虑把它标记为将来读者的利益。更多信息：。
    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>

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

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