J'utilise un formulaire réactif dans lequel je récupère les données de l'API et les affiche dans le html dans le champ de saisie, mais j'obtiens une erreur dans la console. Besoin d'aide pour résoudre.

Ci-dessous le code HTML

 <form [formGroup]="homeForm" class="form-horizontal" (ngSubmit)="continue(homeForm.value)">
                <div class="form-group">
                    <label class="control-label" class="text">Officer Name</label>
                    <input type="text" class="form-control" formControlName="oName" value={{this.home[0].oName}} readonly>
                </div>
                <div class="form-group">
                    <label class="control-label" class="text">Officer ID</label>
                    <input type="text" class="form-control" formControlName="oIDNum" readonly>
                </div>
  div align="end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

Ci-dessous le code de fichier ts

   import { Component, OnInit } from '@angular/core';
   import { FormControl, FormGroup } from '@angular/forms';

   import{Router} from '@angular/router';
   import { ApiService } from '../app.service';


   @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {

  home:any

  constructor(private route:Router,private apiService:ApiService) { }

  ngOnInit() {
    this.apiService.getData().subscribe((data)=>{
    this.home = data;
    console.log(this.home);
    })

  }
 homeForm = new FormGroup({
   oName:new FormControl(''),
   oIDNum:new FormControl(''),
   })
 continue(value){
  console.log(value);
  this.route.navigate(['/form']);
  }
 }

Ceci est le fichier de service

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';

  @Injectable({
  providedIn: 'root'
  })
 export class ApiService {

 constructor(private httpClient: HttpClient) { }
 public getData(){
  return this.httpClient.get(`http://localhost:3000/officer`);
 }
}

Les données de fichier JSON que j'utilise sont ci-dessous

{
 "officer":[ {
"oName": "Example",
"oIDNum": "1"
}]
}

error in console

2
Hemanth Kalyan A 17 mai 2020 à 14:00

3 réponses

Meilleure réponse

Vous pouvez supprimer la valeur dans le html

   value={{this.home[0].oName}}

Et dans le fichier TS, vous devez l'écrire comme ceci ...

 ngOnInit() {
    this.apiService.getData().subscribe((data)=>{
    this.home = data;

    this.homeForm = new FormGroup({
    oName:new FormControl(this.home[0].oName),
    oIDNum:new FormControl(this.home[0].oIDNum),
    })
  })
 }
2
Ramya S 18 mai 2020 à 14:38

Vous pouvez supprimer l'abonnement du composant et utiliser le canal async dans le modèle.

Je vois également d'autres problèmes:

  • La propriété oName est en fait contenue dans le tableau officer.
  • Vous devrez peut-être mettre l'expression d'interpolation entre guillemets.
  • Utilisez l'opérateur de navigation sécurisé { {X0}} pour vous assurer que les variables sont définies avant d'essayer d'accéder à leurs propriétés.

Essayez ce qui suit

Manette

export class HomeComponent implements OnInit {
  home$: any;
  ...

  ngOnInit() {
    this.home$ = this.apiService.getData();
  }
}

Modèle

<ng-container *ngIf="home$ | async as data">
  <input type="text" class="form-control" formControlName="oName" value="{{ data?.officer[0]?.oName }}" readonly>
</ng-container>
1
Michael D 17 mai 2020 à 12:48

En utilisation html

<input type="text" class="form-control" formControlName="oName" value={{this.home.officer[0].oName}} readonly>

C'est-à-dire utiliser value={{this.home.officer[0].oName}} au lieu de value={{this.home.[0].oName}} car this.home n'est pas un tableau, c'est un objet, this.home.office r est un tableau

0
Shlok Nangia 17 mai 2020 à 11:09