Les données JSON ne sont pas affichées
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
https://www.developpez.net/forums/im...AAAElFTkSuQmCC
J'ai donc le composant application-liste qui m'affiche une liste de application-liste-item
mon application-liste.component.ts :
Code:
1
2
|
<app-application-liste-item*ngFor="letapplicationofapplications$|async"[application]="application"></app-application-liste-item> |
Mon application-liste.component.ts :
Code:
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:
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:
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 :
Citation:
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', …}
https://www.developpez.net/forums/im...AASUVORK5CYII=
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
