Question

我正在尝试获取已选中复选框的值并将其放入strig，该字符串将在我的api中使用。我要在选中复选框后获取值，如果未选中该复选框，则检索值。

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

我不知道该怎么做或在打字稿中应该使用哪种方法。任何帮助将不胜感激。

这是更新

<div class="form-check" *ngFor="let x of groupesTable">
               <label class="form-check-label" for="check1">
               <input type="checkbox" class="form-check-input" nom="check1"  [value]= "x.nom_groupe"
               name="x.nom_groupe" (change)="callMe($event, x.nom_groupe)"  [(ngModel)]="grp">{{x.nom_groupe | uppercase}}
               </label>
</div>

在.ts文件中，我做到了

 callMe(event, nom) {
if (event.target.checked) 
  {
    console.log(nom);
    this.nomgrps=this.nomgrps+nom.toUpperCase()+" ";
    console.log(this.nomgrps); 
  }
  else {
    console.log(this.nomgrps);
  }}

但是这也行不通，我不知道为什么它只选中一个复选框，却选中所有复选框。

Answer 1

它会一起检查和取消选中所有框，因为所有formControl都绑定到同一变量：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);
}

https://stackblitz.com/edit/angular-dj95pg?file=src%2Fapp%2Fapp.component.ts

Answer 2

使用ngModelChange：

html：

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

打字稿：

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

Answer 3

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>

当要获取选定的值时，只需要使用数组即可。发挥作用

如果您的groupesTables是对象数组，例如

[{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(",")  
}

您可以在每次更改时调用该函数（使用ngModelChange），但是您可以在提交数据之前简单地调用该函数

如何在Typescript

3 个答案: