时间戳

首页 > 解决方案 > 如何在 Typescript 中获取选中的复选框值

angular - 如何在 Typescript 中获取选中的复选框值

问题描述

我正在尝试获取选中复选框的值并将它们放入一个字符串中，该字符串将在我的 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);
  }}

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

标签： angulartypescript

解决方案

它同时选中和取消选中所有框，因为所有 formControls 都绑定到同一个变量：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

推荐阅读