繁体   English   中英

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

How to pass the checked and unchecked value of checkboxes in component.ts file in angular?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

在此处输入图片说明

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

}
3 个回复
    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>

您必须结合使用$eventid

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

工作堆栈闪电战在这里

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>
3 如何在SAS报告Webout文件中打印选中和未选中的复选框

我有一个名为Proposal的表,其中有一个列名value_cd。 此列具有一些复选框的值,这些复选框将在我的Webout报告中选中。 我想选中所有相关值在此列中的复选框。 这是我的代码 我只想在报告中打印一次复选框,并且应该根据表的value_cd列的值对其进行检查或取消选 ...

5 复选框的选中和未选中值提交给控制器

我有这个带有 14 个复选框的表单,有些可能会被选中,用户可以根据需要自由取消选中它们。 我像这样检索了复选框的值 但是,我得到它作为返回 16 个值而不是 14 个值的数组: 当我选中一个复选框时,选中和未选中的值都会被发送。 我错过了什么吗? 我对 yii2 还很陌生。 任何意见,建 ...

6 具有选中和未选中值的多个复选框数组

所以我有这行代码,它将以一种形式重复不同的时间。 !checked 表示复选框被选中,!unchecked 表示复选框未被选中。 我如何创建一个 php 数组来获取选中和未选中复选框的值,如下所示: 暂时我只能用 $_POST["checkbox"] 获得选中的值,但我无法获得未选中的值 ...

2013-12-26 09:40:47 6 8847   php
10 使用Angular选中和取消选中复选框

在我的表单中,所有这些列中都有一个带有复选框的表。 我有3个&lt;tr&gt; ,每个&lt;tr&gt;都有其ng-repeate调用Web服务以显示克隆(Json数据)。 当我单击一个复选框时,我生成一个js数组,该数组使用以下代码记录id: 在HTML中: 它有效, ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM