Bonjour,
J'ai un problème d'accès à un tableau reçut via mon api.
Voici le tableau
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90 [ { "0": { "idCustomer": "1", "idBillingAddress": "1", "firstNameCustomer": "Nom1", "lastNameCustomer": "Prénom1", "dateOfBirthdayCustomer": "1991-09-04", "phoneCustomer": "1234567890", "mailCustomer": "nom1@test1.com", "mixedPassworrd": "AT1202cm.3", "idPartner": "1", "dateCustomer": "2021-05-08 22:14:22", "statusCustomer": null }, "1": { "idCar": "2", "idCustomer": "1", "licensePlateCar": "AA-123-AA", "brandCar": "Marque1", "modelCar": "Model1", "dateOfCirculationCar": "2020-12-31", "motorizationCar": "Motor1", "urlGrayCard": "adresseServeur/grayCard/1/test1.pdf" }, "idBooking": "1", "idCustomer": "1", "idPartner": "2", "hoursForth": "08:30:00", "dateForth": "2021-05-10", "statusBooking": "Validée", "formulaBooking": "technicalControl", "dateBack": "2021-05-10", "hoursBack": "14:30:00", "idCar": "2", "idForthAddress": "2", "idBackAddress": "3", "idAgency": "1", "distanceForth": "20", "durationForth": "45", "distanceBack": "15", "durationBack": "30", "originBooking": "customer", "dateBooking": "2021-05-08 22:45:57" }, { "0": { "idCustomer": "2", "idBillingAddress": "4", "firstNameCustomer": "Nom2", "lastNameCustomer": "Prénom2", "dateOfBirthdayCustomer": "1990-03-26", "phoneCustomer": "0987654321", "mailCustomer": "nom2@test2.com", "mixedPassworrd": "C260390m", "idPartner": "2", "dateCustomer": "2021-05-08 22:14:22", "statusCustomer": null }, "1": { "idCar": "3", "idCustomer": "2", "licensePlateCar": "BB-123-BB", "brandCar": "Marque2", "modelCar": "Model2", "dateOfCirculationCar": "2012-08-23", "motorizationCar": "Motor2", "urlGrayCard": "adresseServeur/grayCard/2/test2.pdf" }, "idBooking": "2", "idCustomer": "2", "idPartner": "2", "hoursForth": "09:45:00", "dateForth": "2021-05-12", "statusBooking": "Validée", "formulaBooking": "technicalControl", "dateBack": "2021-05-12", "hoursBack": "16:00:00", "idCar": "3", "idForthAddress": "8", "idBackAddress": "7", "idAgency": "2", "distanceForth": "5", "durationForth": "30", "distanceBack": "5", "durationBack": "30", "originBooking": "customer\r\n", "dateBooking": "2021-05-08 22:45:57" } ]
Dans mon code angular j'ai effectué plusieurs test mais impossible d'accéder aux données des données de 2ème niveaux. Voici mon code de mes différents fichiers angular
booking.service.ts
list-booking-view.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
25
26
27
28
29
30
31
32
33
34
35
36 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Subject } from 'rxjs'; import { Booking } from '../models/bookings.model'; @Injectable({ providedIn: 'root' }) export class BookingService { bookingSubject = new Subject<Booking[]>(); api = 'http://localhost:8888/MoutteCAPI/backend/api/booking/listBooking.php'; private bookings: Booking[]; constructor(private httpClient: HttpClient) { } emitBookingSubject() { this.bookingSubject.next(this.bookings); } readListBooking(idPartner) { this.httpClient.get<Booking[]>(`${this.api}?idPartner=${idPartner}`).subscribe( (bookings) => { this.bookings = bookings; this.emitBookingSubject(); }, (error) => { console.log(error); } ); } getBookingById(idBooking) { return this.httpClient.get(`http://localhost:8888/MoutteCAPI/backend/api/booking/listBooking.php?idBooking=${idBooking}`); } }
list-booking-view.component.html
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 import { map, first } from 'rxjs/operators'; import { BookingService } from 'src/app/services/booking.service'; import { Component, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs'; import { Booking } from '../models/bookings.model'; @Component({ selector: 'app-list-booking-view', templateUrl: './list-booking-view.component.html', styleUrls: ['./list-booking-view.component.css'] }) export class ListBookingViewComponent implements OnInit, OnDestroy { bookingSusbcription: Subscription; bookings: Booking[]; dateForth: string; dateBack: string; idPartner = localStorage.getItem('idPartner'); constructor(private bookingService: BookingService) {} ngOnInit(): void { this.bookingSusbcription = this.bookingService.bookingSubject.subscribe( (bookings: Booking[]) => { this.bookings = bookings; console.log(bookings); } ); this.bookingService.readListBooking(this.idPartner); } ngOnDestroy(): void { this.bookingSusbcription.unsubscribe(); } }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <div class="row mt-5 mb-3 pt"> <div class="text-center col-12"> <h2>Rendez-vous à venir</h2> </div> </div> <div class="container pb-5"> <app-list-booking *ngFor="let booking of bookings; let i = index" [indexOfBooking]="i" [idBooking]="booking.idBooking" [firstNameCustomer]="booking.0.firstNameCustomer" [lastNameCustomer]="booking.0.lastNameCustomer" [phoneCustomer]="booking.0.phoneCustomer" [licensePlateCar]="booking.1.licensePlateCar" [brandCar]="booking.1.brandCar" [modelCar]="booking.1.modelCar" [dateOfCirculationCar]="booking.1.dateOfCirculationCar" [motorizationCar]="booking.1.motorizationCar" [dateForth]="booking.dateForth" [hoursForth]="booking.hoursForth" [dateOfBirthdayCustomer]="booking.0.dateOfBirthdayCustomer" [mailCustomer]="booking.0.mailCustomer" [urlGrayCard]="booking.1.urlGrayCard" [dateBack]="booking.dateBack"></app-list-booking> </div>
list-booking.component.ts
list-component.html
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 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-list-booking', templateUrl: './list-booking.component.html', styleUrls: ['./list-booking.component.css'] }) export class ListBookingComponent implements OnInit { @Input() indexOfBooking: number; @Input() idBooking: number; @Input() firstNameCustomer: string; @Input() lastNameCustomer: string; @Input() phoneCustomer: string; @Input() licensePlateCar: string; @Input() brandCar: string; @Input() modelCar: string; @Input() dateOfCirculationCar: string; @Input() motorizationCar: string; @Input() dateForth: string; @Input() hoursForth: string; @Input() dateOfBirthdayCustomer: string; @Input() mailCustomer: string; @Input() urlGrayCard: string; constructor() { } ngOnInit(): void { } }
Code html : 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 <div class="row list-group list-group-flush list-group-item d-flex flex-row"> <div class="col-1 m-auto"> <img src="./assets/images/profile.png"> </div> <div class="col-7 d-flex flex-column"> <div class="row"> <div class="col-6"> <p class="m-auto p-2 info"><span>Nom : </span><br>{{ firstNameCustomer }}</p> </div> <div class="col-6"> <p class="m-auto p-2 info"><span>Prénom : </span><br>{{ lastNameCustomer }}</p> </div> </div> <div class="row"> <div class="col-6"> <p class="m-auto p-2 info"><span>Plaque d'immatriculation : </span><br>{{ licensePlateCar }}</p> </div> <div class="col-6"> <p class="m-auto p-2 info"><span>Date de rendez-vous : </span><br>{{ dateForth }}</p> </div> </div> </div> <div class="col-4 d-flex flex-row"> <div class="m-auto"> <a [routerLink]="[idBooking]" class="mr-3 plus">Détails</a> </div> <div class="m-auto"> <a [href]="[urlGrayCard]" target="_blank" style="font-size: 12px;" class="mr-3 plus btn">Carte Grise</a> </div> </div> </div>
Partager