Angular 如何在Typescript中获取复选框值

我试图获取复选框的值，并将它们放入strig中，该字符串将在我的api中使用。 我想在选中复选框后获取值，如果未选中复选框，则检索值

   <div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="group" (change)=""> 
       {{x.nom_groupe | uppercase}}
  </div>

但这也不起作用，我不知道为什么它检查所有的复选框，而我只检查一个

使用ngModelChange：

html:

---

Med，复选框只能获得两个值：true或false。因此需要一个数组来存储这些值。如果groupesTable是一个对象数组，则可以使用自己的对象“groupesTable”。否则需要将值存储在数组中

<div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="x.checked"> 
       {{x.nom_groupe | uppercase}}
</div>

//or
//declare in your .ts
checkes:boolean[]=[]
//and your .html
<div *ngFor="let x of groupesTable;let i=index">
      <input type="checkbox"  [(ngModel)]="checkes[i]"> 
       {{x.nom_groupe | uppercase}}
</div>

您的函数可以如下所示

getValuesChecked()
{
  return groupesTable.filter(x=>x.checked).map(x=>x.id_groupe).join(",")  
}
//or 
getValuesChecked()
{
  return groupesTable.filter((x,index)=>this.checkes[index])
       .map(x=>x.id_groupe).join(",")  
}

---

每次更改都可以调用函数（使用ngModelChange），但只需在提交数据之前调用函数即可。它会同时选中和取消选中所有框，因为所有表单控件都绑定到同一个变量：

grp

。创建一个新表单模型数组，您可以使用该数组来获取选中的复选框，或者通过动态添加新属性

checked

来使用循环中的对象

比如：

<div *ngFor="let x of groupesTable">
      <input type="checkbox"  [(ngModel)]="x.checked" (change)="foo()"> 
      {{x.nom_groupe | uppercase}}
</div>


foo() {
  let checkedStrings = this.groupesTable.reduce((acc, eachGroup) => {
    if (eachGroup.checked) {
      acc.push(eachGroup.nom_groupe.toUpperCase())
    }
    return acc
  }, []).join(" ")

  console.log(checkedStrings);
}

{x.nom_群|大写}
foo（）{
让checkedStrings=this.groupesTable.reduce（（acc，eachGroup）=>{
如果（选中每个组）{
acc.push（eachGroup.nom_groupe.toUpperCase（））
}
返回acc
}，[]）。加入（“”）
console.log（checkedStrings）；
}

---

不，这不起作用，当我只选中一个复选框时，它会选中或取消选中所有选项，另外，我真正想做的是连接选中复选框的值。如果

check==true

，为什么不在change函数中将obj添加到数组中，或者如果

check==false

则删除obj，然后获取所有数组元素？我实际上不知道如何做，另外，我显示的元素来自一个数据库，我已经更新了typescript代码，向您展示了我的意思。数据库提供的显示数据不应影响代码，因为它从复选框中获取html值我将尝试您提供的代码，但当我只选中一个复选框时，它会选中所有复选框，您知道为什么吗@David@MedAnis请注意，在

groupesTable

中的对象下创建了额外的

选中的

键。如果您不希望这样，那么在ts中有一个数组，它将为groupsTable的每个对象保存一个变量，每个变量现在将用于绑定到每个复选框

public inputs = [];

change(obj: any, check: boolean){
    if(check) this.inputs.push(obj);
    else this.inputs = arrayRemove(this.inputs, obj);

    displayCheckBoxes();
}

displayCheckBoxes(){
    this.inputs.forEach(function(element) {
        console.log(element);
    });
}

arrayRemove(arr, value) {
    return arr.filter(function(ele){
        return ele != value;
    });
}

<div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="x.checked"> 
       {{x.nom_groupe | uppercase}}
</div>

//or
//declare in your .ts
checkes:boolean[]=[]
//and your .html
<div *ngFor="let x of groupesTable;let i=index">
      <input type="checkbox"  [(ngModel)]="checkes[i]"> 
       {{x.nom_groupe | uppercase}}
</div>

[{id_groupe:0,nom_groupe:'...'},{id_groupe:1,nom_groupe:'...'},..]

getValuesChecked()
{
  return groupesTable.filter(x=>x.checked).map(x=>x.id_groupe).join(",")  
}
//or 
getValuesChecked()
{
  return groupesTable.filter((x,index)=>this.checkes[index])
       .map(x=>x.id_groupe).join(",")  
}

<div *ngFor="let x of groupesTable">
      <input type="checkbox"  [(ngModel)]="x.checked" (change)="foo()"> 
      {{x.nom_groupe | uppercase}}
</div>


foo() {
  let checkedStrings = this.groupesTable.reduce((acc, eachGroup) => {
    if (eachGroup.checked) {
      acc.push(eachGroup.nom_groupe.toUpperCase())
    }
    return acc
  }, []).join(" ")

  console.log(checkedStrings);
}