Bonjour,

J'apprends en autodidacte le merveilleux monde d'Angular, mais je rencontre actuellement un probl�me :

Je d�sire r�aliser un site web et pour ce faire j'utilise en back Spring et en front Angular 7.

Et la, j'ai un souci.

J'ai actuellement 3 entit�s : le constructeur, la cat�gorie et le vaisseau.

Et mon vaisseau a bien entendu un attribut constructeur (le constructeur du vaisseau) et une cat�gorie (chasseur ...).

Apr�s demande � mon service. (vaisseau.service.ts)

Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
public host = 'http://localhost:8080';
 
  constructor(private httpClient: HttpClient) {
  }
 
  public getVaisseaux(page: number, size: number) {
    return this.httpClient.get(this.host + '/vaisseaus?page=' + page + '&size=' + size);
  }
il me retourne le JSon suivant :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
  "_embedded" : {
    "vaisseaus" : [ {
      "nom" : "nomVaisseau",
      "description" : "Description du vaisseau",
      "image" : "http://127.0.0.1/img/Vaisseaux/2.jpg",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },
        "vaisseau" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },
        "constructeur" : {
          "href" : "http://localhost:8080/vaisseaus/2/constructeur"
        },
        "categorie" : {
          "href" : "http://localhost:8080/vaisseaus/2/categorie"
        },
        "utilisateurs" : {
          "href" : "http://localhost:8080/vaisseaus/2/utilisateurs"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/vaisseaus{&sort}",
      "templated" : true
    },
    "profile" : {
      "href" : "http://localhost:8080/profile/vaisseaus"
    },
    "search" : {
      "href" : "http://localhost:8080/vaisseaus/search"
    }
  },
  "page" : {
    "size" : 5,
    "totalElements" : 1,
    "totalPages" : 1,
    "number" : 0
  }
}
que j'appelle ainsi :

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
25
26
27
28
public constructeurs: any;
  public pages: Array<number>;
  private currentPage = 0;
  private size = 2;
  private totalPages: number;
  private currentKeyword = '';
 
  constructor(private constService: ConstructeurService, private router: Router) {
  }
 
  ngOnInit() {
    this.onGetConstructeurs();
  }
 
  /**
   * Méthode qui permet de récupérer la liste des constructeurs
   * selon la page et le nombre de constructeur qu'elle peut contenir
   */
  onGetConstructeurs() {
    this.constService.getConstructeurs(this.currentPage, this.size)
      .subscribe(data => {
        this.constructeurs = data;
        this.totalPages = data['page'].totalPages;
        this.pages = new Array<number>(this.totalPages);
      }, err => {
        console.log(err);
      });
  }
et dans mon template :

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
25
<table *ngIf="vaisseaux" class="table">
        <!-- Si il n'y a pas de vaisseaux en BDD n'affiche pas le tableau-->
        <thead class="thead-dark">
        <tr>
          <th scope="col">Vaisseau</th>
          <th scope="col">Nom</th>
          <th scope="col">Constructeur</th>
          <th scope="col">Catégorie</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let p of vaisseaux._embedded.vaisseaus">
          <td class="col-md-2 align-middle"><img src="{{p.image}}"></td><!-- {{p.image}} -->
          <td class="col-md-2 align-middle text-center">{{p.nom}}</td>
          <td class="col-md-2">{{p.constructeur.nom}}</td>
          <td class="col-md-2">{{p.categorie.nom}}</td>
          <td class="col-md-2 align-middle  text-center">
            <a (click)="voirVaisseau(p)" class="btn btn-primary"><i aria-hidden="true"
                                                                    class="fa fa-plus-circle"></i></a>
            <a (click)="onEditVaisseau(p)" class="btn btn-warning m-2">Modifier</a>
            <a (click)="onDeleteVaisseau(p)" class="btn btn-danger">Supprimer</a></td>
        </tr>
        </tbody>
      </table>
et l'erreur suivante appara�t :

Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
ERROR TypeError: "_v.context.$implicit.constructeur is undefined"
    View_LstVaisseauComponent_3 LstVaisseauComponent.html:35
    Angular 29
    RxJS 5
    Angular 9
LstVaisseauComponent.html:34:56
    View_LstVaisseauComponent_3 LstVaisseauComponent.html:34
    Angular 15
    RxJS 5
    Angular 9
Je n'arrive donc pas � avoir le constructeur du vaisseau comme sa cat�gorie ....

J'ai regard� sur Google et autre les diff�rentes fa�ons de charger le JSon (via des interfaces dans Angular, ou des constructeurs qui prennent en param�tre le Json qui est parcouru comme un tableau ...)

Mais rien avec des

Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
"vaisseau" : {
          "href" : "http://localhost:8080/vaisseaus/2"
        },
Comme si c��tait charger en lazy ...
Je ne comprends pas d'o� vient mon probl�me ... Du cot� du Back o� il faut que je donne des param�tres � mon REST pour qu'il envoie � chaque fois toutes les informations et non des liens qui pointent vers ou c'est � Angular de charger les diff�rents object en chargent � partir des liens ?


Merci d'avance pour toute aides ^^.