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

Posted 2023-05-07

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

【英文标题】：How to retrieve dynamic box values (true or false if checked or not) - Angular 6

【发布时间】：2019-03-15 04:06:16

【问题描述】：

我使用 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"  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;
  

【参考方案1】：

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

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

【讨论】：

它有效，我通过选中或取消选中一个框来判断为真或假，但是我显然只收到一个带有“hello：true”或“hello：false”的对象以及那些勾选的对象.. . 如何检索相关框的 id 以区分检查了哪些元素？非常感谢你的帮助 ！ :D

看看这个链接 [***.com/questions/50374174/…

非常感谢您的帮助！