如何在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>