如何检索动态框值（如果选中，则为真或假） - Angular 6

Question

我使用 Angular 6，从 JSON 文件中获取数据并将其显示在表格中。我希望能够选中复选框，以便稍后能够对选中的复选框执行 POST 处理（如此正确）。 问题是我获得了动态值，因此即使 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

您可以在 FormGroup 上查找 valueChanges。类似的东西

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