Discussion :

[Michel38]

Bonjours à tous,

Je débute toujours avec Angular. Je ne comprends pas. J'ai suivi les cours Angular. Je suis arrivé à quelque chose qui fonctionne (heureusement).

Dans le but d'être sûr d'avoir bien compris, je me suis donné un exercice. De refaire à peu près la même chose que dans ce cours, mais avec quelque chose de plus proche de ce que je veux faire.

Ainsi, Dans mon appli, j'ai mon arborescence qui est comme cela :

app
applications
components
application-liste
application-liste.component.html
application-liste.component.scss
application-liste.component.ts
application-liste-item
application-liste-item.component.html
application-liste-item.component.scss
application-liste-item.component.ts
models
application.model.ts
resolvers
applications.resolver.ts
services
applications.service.ts
applications-routing.module.ts
applications.module.ts



J'ai donc le composant application-liste qui m'affiche une liste de application-liste-item
mon application-liste.component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<app-application-liste-item*ngFor="letapplicationofapplications$|async"[application]="application"></app-application-liste-item>

Mon application-liste.component.ts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Component({
  selector: 'app-application-liste',
  templateUrl: './application-liste.component.html',
  styleUrl: './application-liste.component.scss'
})

export class ApplicationListeComponent implements OnInit{

  applications$!: Observable<Application[]>;

  constructor(private route: ActivatedRoute,
              private applicationsService: ApplicationsService
  ) {}

  ngOnInit(): void {
    this.applications$ = this.route.data.pipe(
      map(data => data[`applications`])
    )
    console.log('Resolved data' , this.applications$);
  }
}

et mon application-liste-item.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, Input, OnInit } from '@angular/core';
import { Application } from '../../models/application';

@Component({
  selector: 'app-application-liste-item',
  templateUrl: './application-liste-item.component.html',
  styleUrl: './application-liste-item.component.scss'
})
export class ApplicationListeItemComponent implements OnInit{

  @Input() application!: Application;

  tempUser = { firstName: 'Michel', lastName: 'Béjean'};

  constructor() {}

  ngOnInit(): void {
    console.log('Prénom : ' , this.tempUser.firstName);
    console.log('Dans Item libelle ', this.application.libelle);
    console.log('Dans Item', this.application);
  }
}

Mon modèle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export class Application {
  statut!: string;
  identifiant!: string;
  libelle!: string;
  code_iam!: string;
  st_principal!: string;
  domaine!: string;
  portefeuille!: string;
  departement!: string;
  division!: string;
  facturable!: string;
  type_application!: string;
  portail_commercial!: string;
  vpn!: string;
  equipement!: string;
}

Le problème ? j'ai mis des console.log un peu partout. Dans mon application-liste-item.component.ts, le this.application me ramène bien mes enregistrements.
Et quand je veux afficher le this.application.libelle, et bien c'est undifined :

Dans Item libelle undefined
application-liste-item.component.ts:20 Dans Item {STATUT: 'ON', IDENTIFIANT: '2440', LIBELLE: 'ARMEN', CODE_IAM: '56568', ST_PRINCIPAL: 'ARMEN', …}
application-liste-item.component.ts:18 Prénom : Michel
application-liste-item.component.ts:19 Dans Item libelle undefined
application-liste-item.component.ts:20 Dans Item {STATUT: 'OFF', IDENTIFIANT: '2501', LIBELLE: 'CAIMAN', CODE_IAM: 'IAM', ST_PRINCIPAL: 'CAIMAN', …}
application-liste-item.component.ts:18 Prénom : Michel
application-liste-item.component.ts:19 Dans Item libelle undefined
application-liste-item.component.ts:20 Dans Item {STATUT: 'ON', IDENTIFIANT: '2491', LIBELLE: 'SEE TRAINS', CODE_IAM: 'SEE', ST_PRINCIPAL: 'SEE TRAINS', …}

Quelqu'un saurait me dire pourquoi je n'arrive pas à afficher mes données dans mon template ?
Je n'ai pas mis le application-liste-item.component.html, c'est super simple, c'est quelque chose comme ça : <span>{{application.libelle}}</span>

Michel

[mathieu]

libelle est en majuscules quand vous affichez le contenu de this.application.

[Michel38]

Bonjour,

Merci Mathieu pour ta réponse.
Oui, effectivement, ça me choque un peu.
Mais quand je tape this.application. je vois la liste des champs de Application. et tous les champs sont en minuscules.
Et quand j'essaie de mettre this.application.LIBELLE, j'ai une erreur

Après, peut être que je pourrais, dans la classe Application, mettre tous les champs en majuscule.

[Michel38]

Et bien j'ai trouvé la cause.
Ma solution marchait, forcément. Mais tu m'as mis sur la voie.

Le problème venait de ma source de données JSON ou j'avais mis les champs en majuscules.

Le problème est donc bien résolu.

Je te remercie.

Michel