Bonjours à tous,

Je débute toujours avec Angular. Je ne comprends pas. J'ai suivi les cours Angular sur OpenClassrooms. 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