如何在angular的component.ts文件中传递复选框的选中和未选中值？

Question

我有一个看起来像这样的复选框：

它通过json数据进行迭代：

代码如下：

<div class="card-body">
   <h5>Document List</h5>
   <div class="form-check" *ngFor="let document of documents">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
      name="document.docName" (click)="callMe(document.docId)" >{{document.docName}}
      </label>
   </div>
</div>

我想进行类似用户选择复选框的操作，然后尝试将ID传递给component.ts文件。在这种方法中，如果选中了复选框，则单击（=“）=” callMe（document.docId）“ ，然后ID将作为在component.ts文件中是

callMe(id:any){
  console.log(id);
}

但是当我取消选中复选框之一时，发生的问题是

图2。

document.ts文件为：

export class Document {

    docId:number;
    docName:number;

}

Answer 1

    callMe(id:any,event){
      if(event.target.checked)
       {  
        console.log(id);
       }
    }

<div class="card-body">
   <h5>Document List</h5>
   <div class="form-check" *ngFor="let document of documents">
      <label class="form-check-label" for="check1">
      <input type="checkbox" class="form-check-input" id="check1"  [value]= "document.docId"
      name="document.docName" (click)="callMe(document.docId,$event)" >{{document.docName}}
      </label>
   </div>
</div>

Answer 2

您必须结合使用$event和id

callMe(event, id) {
  if (event.target.checked) {
    console.log(id);
  }
}

并在如下所示的模板文件中

<input type="checkbox" class="form-check-input" id="check1" [value]="document.docId" name="document.docName" (change)="callMe($event, document.docId)">{{document.docName}}

工作堆栈闪电战在这里

Answer 3

app.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.html'
})
export class AppComponent {
  documents = [
    {
      docId:1,
      docName:'Proforma Invoice',
      checked: true
    },
    {
      docId:2,
      docName:'Packing List',
      checked: false
    }
  ];

  checkboxClicked() {
    this.documents.filter(x => x.checked).map(x => {
      console.log(x.docId);
    })
  }

}

注意：您不应将id作为复选框值传递。 使用对象创建一些布尔属性。

app.component.html

<ng-container *ngFor="let document of documents">
  <input type="checkbox" name="checkbox{{document.docId}}" [(ngModel)]="document.checked" (change)="checkboxClicked()" />
</ng-container>