Как получить динамические значения поля (true или false, если отмечено или нет) - Angular 6

Question

Я использую Angular 6, я получаю данные из файла JSON и отображаю их в таблице.Я хотел бы иметь возможность проверить флажки, чтобы иметь возможность выполнять обработку POST позже для флажка установлен (так верно).Проблема в том, что я получаю динамические значения, поэтому я должен иметь возможность получить значение флажка (true или false), даже если файл JSON изменяется (добавление данных).Я не могу получить значение флажка (true или false) динамически ... Можете ли вы помочь мне, пожалуйста.

demande-ouverture-compte.component.html:

<h2>Demandes d'ouverture de compte</h2>
<hr>
<form #form = "ngForm" (ngSubmit) = "getVerificationCheckboxValidation(form)" [formGroup]="profileForm">
  <table class="table table-striped table-dark">
    <thead>
      <tr>
        <th scope="col">Nom</th>
        <th scope="col">N° demande</th>
        <th scope="col">date</th>
        <th scope="col">Validation</th>
      </tr>
    </thead>
    <tbody *ngFor="let demande of demandes; let i = index">
      <tr>
        <th scope="row">{{ demande.nom }}</th>
        <td>{{ demande.id_demande }}</td>
        <td>{{ demande.date }}</td>
        <td>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="test" id="customCheck{{ i }}" [checked]="demande.checked">
            <label class="custom-control-label" for="customCheck{{ i }}">Valider la demande d'ouverture</label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <table>
    <tr *ngFor="let demande of demandes; let j = index">
        <td>
            <input type="checkbox" [checked]="demande.checked" formControlName="hello" id="{{demande.roleID}}" />
       </td>
       <td>

       </td>
       <td>Voici demandes{{ j }}</td>
    </tr>
  </table>
  <button class="col-2 offset-10 addAccount">Valider</button>
</form>

<!-- Remplacer le bouton valider par cette image -->
<!--<img src="../../assets/img/addAccount.svg" alt="" class="col-4 offset-7 addAccount">-->

demande-ouverture-compte.component.ts:

import { Component, OnInit } from '@angular/core';
import { DemandeOuvertureCompteService } from '../demande-ouverture-compte.service';
import { FormGroup, FormControl, NgForm } from '@angular/forms';

@Component({
  selector: 'app-demande-ouverture-de-compte',
  templateUrl: './demande-ouverture-de-compte.component.html',
  styleUrls: ['./demande-ouverture-de-compte.component.scss']
})
export class DemandeOuvertureDeCompteComponent implements OnInit {

  demandes: Object;

  profileForm = new FormGroup({
    hello: new FormControl('')
  });
  
  playerName: string;

  constructor(private demandeOuvertureCompte: DemandeOuvertureCompteService) { }

  ngOnInit() {
    this.demandeOuvertureCompte.getDemandesOuvertureCompte().subscribe(
      demandeOuvertureCompte => this.demandes = demandeOuvertureCompte 
    );
  }

  getVerificationCheckboxValidation(form: NgForm) {
	console.log(form.value.test);
	console.log(this.profileForm.value);
	console.log("test");
	console.log(this.playerName);
	return this.playerName;
  }

}

Answer 1

Вы можете искать значениеChanges в FormGroup.Что-то вроде

ngOnInit() {
 this.profileForm.valueChanges.subscribe(
  value => console.log(value);
 )