Question

我使用Angular 6，我从JSON文件中获取数据，并将其显示在表格中。我希望能够选中该复选框，以便以后能够对选中的复选框进行POST处理（是如此）。问题是我获得了动态值，因此即使JSON文件发生了更改（添加数据），我也必须能够检索复选框的值（是或否）。我无法动态获取复选框的值（对或错）。你能帮我吗？

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

在您的情况下，变量demandes的引用发生了变化，因为该角度未跟踪此变量。在这种情况下，您可以改用getter。

使用以下代码段。检查它是否对您有用-

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;

  get demandes(){
     return this._demandes;
  }

  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 2

您可以在FormGroup上查找valueChanges。像

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

如何检索动态框值（是否选中，则为true或false）-Angular 6

2 个答案: