Блог

Я пытаюсь получить значения отмеченных флажков и поместить их в строку, эта строка будет использоваться в моем api. Я хочу получить значения после того, как флажок установлен, и получить значение, если этот флажок снят.

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

Я понятия не имею, как это сделать или какой метод я должен использовать в typescript.
Любая помощь будет оценена.

Это обновление

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

Но это также не работает, я не знаю, почему он проверяет все флажки, в то время как я проверяю только один.

Он проверяет и снимает все флажки вместе, потому что все ваши 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/app/app.component.ts

Кроме того, флажок может принимать только два значения: 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), но вы можете просто вызвать функцию перед отправкой данных

Используйте ngModelChange:

HTML:

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

typescript:

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