如何检索动态框值(真或假，如果选中与否)-角度6

Question

我使用角6，我从一个JSON文件中获取数据，并将它显示在一个表中。我希望能够选中这些复选框，以便以后能够对选中的复选框进行后处理(如此正确)。问题是，我获得了动态值，因此即使JSON文件更改(添加数据)，也必须能够检索复选框的值(true或false)。我无法动态地得到复选框(真或假)的值.你能帮帮我吗。

demande ouverture-compte.Compent.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">-->

​

组件.：

​

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

您可以在valueChanges on FormGroup上查找。有点像

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