subject fini

src/app/modules/admin/pages/page-tableau/page-tableau.component.html

@@ -1,4 +1,4 @@
-<table class="table">
+<table class="table" *ngIf="subCollection$ | async as collection">
   <thead class="thead-dark">
     <tr>
       <th scope="col">Id</th>
@@ -14,16 +14,16 @@
     </tr>
   </thead>
   <tbody>
-    <tr *ngFor="let products of listData">
-      <th scope="row">{{products.product_id}}</th>
-      <td>{{products.product_name}}</td>
-      <td>{{products.product_price}}</td>
-      <td>{{products.product_qty}}</td>
-      <td>{{products.product_instock}}</td>
-      <td>{{products.product_breadcrumb_label}}</td>
-      <td>{{products.product_rating}}</td>
+    <tr *ngFor="let products of collection">
+      <th scope="row">{{products.id}}</th>
+      <td>{{products.name}}</td>
+      <td>{{products.price}}</td>
+      <td>{{products.quantity}}</td>
+      <td>{{products.instock}}</td>
+      <!-- <td>{{products.Catégorie.}}</td> -->
+      <td>{{products.rating}}</td>
       <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
-      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.product_id)"></td>
+      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(5)"></td>
     </tr>
   </tbody>
 </table>

src/app/modules/admin/pages/page-tableau/page-tableau.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { Plant } from '../../models/plant';
 import { AdminService } from '../../services/admin.service';
 
 @Component({
@@ -8,15 +10,22 @@ import { AdminService } from '../../services/admin.service';
 })
 export class PageTableauComponent implements OnInit {
   public listData!: any[];
-  constructor(private adminService: AdminService) { }
+  public subCollection$: Subject<Plant[]>;
+
+  constructor(private adminService: AdminService) {
+    this.subCollection$ = this.adminService.subCollection$;
+    this.adminService.refreshCollection();
+
+    this.adminService.subCollection$.subscribe((data: Plant[]) => console.log("après mapping", data))
+  }
 
   ngOnInit(): void {
-    this.listData = [];
-    this.adminService.getData().subscribe(
-      (listPlant: any[]) => {
-        this.listData = listPlant;
-        this.listData.length = 9;
-      })
+    // this.listData = [];
+    // this.adminService.getData().subscribe(
+    //   (listPlant: any[]) => {
+    //     this.listData = listPlant;
+    //     this.listData.length = 9;
+    //   })
   }
 
   onClickDelete(id: number){

src/app/modules/admin/services/admin.service.ts

@@ -1,19 +1,43 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { map, Observable, Subject } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { Plant } from '../models/plant';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AdminService {
+  public collection$!: Observable<Plant[]>;
+  public subCollection$ = new Subject<Plant[]>();
   apiUrl: string;
+  public plantCollection!: Plant[];
 
   constructor(private httpClient: HttpClient) {
     this.apiUrl = environment.apiUrl;
+    this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`).pipe(
+      // Ici on modifie l'objet que transporte notre Observable grâce à l'opérateur map()
+      map((tabObj: any[]) => {
+        //console.log("avant mapping: ", tabObj);
+        // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
+        return tabObj.map((obj: any) => {
+          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
+        })
+      }));
+    //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
+    //console.log(this.collection$);
   }
 
-  getData(): Observable<any[]> {
-    return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
+  public refreshCollection(): void {
+    // On se sert de notre flux de donnée type observable froid
+    this.collection$.subscribe((listPlant: Plant[]) => {
+      this.plantCollection = [...listPlant];
+      // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
+      this.subCollection$.next(listPlant);
+    })
   }
+
+  // getData(): Observable<any[]> {
+  //   return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
+  // }
 }