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

我有一个复选框，如下所示：

它通过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>

但当我取消选中其中一个复选框时，出现的问题是

图2。

document.ts文件是：

export class Document {

    docId:number;
    docName:number;

}

callMe（id:any，event）{
if（event.target.checked）
{  
console.log（id）；
}
}
文件清单
{{document.docName}

callMe（id:any，event）{
if（event.target.checked）
{  
console.log（id）；
}
}
文件清单
{{document.docName}

您必须使用

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

{{document.docName}

---

工作stackblitz是

您必须结合使用

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

{{document.docName}

---

正在工作的stackblitz是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>

---

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>

提供完整的代码以了解哪里出了问题您不能使用模板驱动的表单吗？检查此问题-这可能有助于您满足需求提供完整的代码以了解哪里出了问题您不能使用模板驱动的表单吗？检查此问题-这可能有助于您满足您的需求获取此。选中？这指的是复选框我没有获取您正在做的事情您从模板传递$event，然后使用该事件获取target并检查targetbrother上的checked属性，但在此callMe中（id:any，event）方法如果我取消选中该复选框，则其id仍然显示在控制台中，从中获取此值。选中？这指的是复选框我没有获取您正在做什么您从模板传递$event，然后使用该事件获取目标并检查targetbrother上的checked属性，但在该callMe中（id:any，event）方法如果我取消选中该框，则其id仍显示在控制台中，但当我取消选中其中一个框时，该id应从控制台中删除？如何获取该值？@ashwinkarki一旦在控制台中打印出值，除非手动清除，否则无法删除该值。你检查我提供的stackblitz了吗？是的，我只需要传递checked复选框的id。如果未选中该复选框，则它不应出现在控制台中。是的，但当我取消选中其中一个复选框时，该id应从控制台中删除？如何获取该值？@ashwinkarki一旦在控制台中打印出值，除非手动清除，否则无法删除该值。你检查我提供的stackblitz了吗？是的，我只需要传递checked复选框的id。如果未选中，则它不应出现在控制台中。当我在html中复制并粘贴代码时，此类错误出现“错误错误：如果在表单标记中使用ngModel，则必须设置name属性，或者必须在ngModelOptions中将表单控件定义为“standalone”向复选框字段添加名称，如上文所述当我复制并粘贴html代码时，此类错误出现“错误错误：如果在表单标记中使用ngModel，则必须在ngModelOptions中设置name属性或将表单控件定义为standalone”。向复选框字段添加名称，如上文所述