Afficher les détails en fonction d'un ID

Version imprimable

1 pièce(s) jointe(s)

Bonjour chers tous,

J'utilise Ionic/angular 11

J'affiche une liste de numéro d'abonnement et je souhaiterais en fonction d'un numéro d'abonnement sélectionné, afficher les informations en rapport avec ce numéro.
sélectionné.
Pièce jointe 596235

Ma démarche:

ma page html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      <ion-row *ngFor="let payLoad of PayloadData">
        <div *ngIf= "payLoad.STATUS !== '4'">
          //je récupère dans mon lien ahref le numéro d'abonnement
          <a routerLink="/details-abonnement/{{payLoad.SUBS_ID}}"><ion-col >{{payLoad.SUBS_ID}}</ion-col></a>
          <ion-col>{{payLoad.SOLDE }} FCFA</ion-col>
        </div>
        <ng-container *ngFor="let tag of payLoad.TAGS" size="auto">
          <div *ngIf="tag.STATUS === '1'">
            <ion-col>{{tag.TAG_ID}}</ion-col> 
          </div>
          <div *ngIf="tag.STATUS !== '1'">
            <del>{{tag.TAG_ID}} - </del>
          </div>
        </ng-container>
        </ion-row>

je voudrais dans ma page TS:
récupère ce numéro sélectionné et le mettre dans une requête pour interrogé une API, puis avec les résultats obtenu les afficher dans une page DetailsAbonnement.

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
25
26
27
28
29
30
31
constructor(  
    private http: HttpClient,  
    public authService: AuthService,
    private nativeStorage: NativeStorage,
    public LocalServ: LocalService)
      {
        this.getHistorique()
      }
 
    ngOnInit() {
 
    }
 
 getHistorique() {
      le lien de mon API
      let url = "http://www.site.com/ipingea/?action=GST&customerID=" + {{payLoad.SUBS_ID}};
      console.log(url);
      this.http.get(url)
        .subscribe(
           async (res: any[]) => 
           {
            this.idty = res;
            console.log('affiche le tableau des historiques');
            console.log(this.idty);
            this.PayloadData = this.idty.PAYLOAD;
          },
 
           async (err: any[]) => {
            console.log(err);
         });
    }

je voudrais savoir si je m'y prend bien.

Salutations sincères

ça va, juste quelques points :

(1)
Code:

1 2 3 4 5 6 let url = "http://www.site.com/ipingea/?action=GST&customerID=" + {{payLoad.SUBS_ID}}; faire plutôt : let url = `http://www.site.com/ipingea/?action=GST&customerID=${payLoad.SUBS_ID}`; // ` <- c'est les anti-cotes : ALT GR + 7
(2)
mais : payLoad.SUBS_ID tu le récupère comment ?

pour info, quand tu as un chemin avec un paramètre : http://www.site.com/ipingea/?action=...stomerID=12345
il faut utiliser le service router pour récupérer le paramètre dans l'url !

(3)
faudrait mettre : "http://www.site.com"
dans une variable d'environnement, pour avoir :

environment.ts et environment.prod.ts et
Code:

1 2 3 4 import { environment .... let url = `${environment.url}/ipingea/?action=GST&customerID=${payLoad.SUBS_ID}`;
(4) async ne sert à rien !

Code:

async (res: any[]) =>

(5) après la méthode du get http, la bonne pratique est de le mettre dans un service
et le composant appel ce service pour faire le get

rappel bonne pratique :
on classe le code métier dans des services
les composants qui doivent avoir le minimum de code font appels à ces services

par exemple, disons que je gère des produits, je classe par thème et responsabilité
* api-product.service.ts <----- à la responsabilité de faire des requêtes <--- le thème est les produits <------ toutes les fonctions de requêtes http .; get http getProducts() get ProductbyId(....
* product.service.ts <------ à la responsabilité de faire des manipulation diverses <-- le thème est les produits <----- toues les fonctions avec le code métier diverses : des calculs....

les composants font appels à : api-product.service.ts et product.service.ts

résultat : c'est vrai qu'au début on perd un peu de temps pour classer.. mais ensuite on gagne en maintenance, en visibilité et même au final on gagne du temps

21/04/2021, 13h25
rickjason

Citation:

(2)mais : payLoad.SUBS_ID tu le récupère comment ?

a cette question : je répondrais ceci (page html)

Code:

<a routerLink="/details-abonnement/{{payLoad.SUBS_ID}}"><ion-col >{{payLoad.SUBS_ID}}</ion-col></a>
21/04/2021, 13h29
krakatoa

(2)
je voulais dire dans le composant pas dans le template

:D ah d'accord, c'est justement a ce niveau que je bloque, je sais pas comment récupérer dans mon composant.
stp aurais-tu une technique?

Je veux pouvoir récupérer a partir de mon template, pour faire ma requête dans mon composant dans la fonction : getDetailsAbonnement()
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 constructor ( private http: HttpClient, public authService: AuthService, private nativeStorage: NativeStorage, public alertController: AlertController, private activatedRoute: ActivatedRoute, private router: Router){ this.getDetailsAbonnement} ngOnInit() { } getDetailsAbonnement(payLoad) { let url = `http://www.site.com/ipenge/?action=GST&customerID=${payLoad.SUBS_ID}`; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
ngOnInit() {
 
    this.activatedRoute.fragment.subscribe((fragment: string) => {
 
      console.log(fragment);// OUTPUT ?productid=1543&color=red
 
      const urlParams = new URLSearchParams(fragment);
 
      const productid = urlParams.get('productid')
      console.log(productid); // OUTPUT 1543
 
      const color = urlParams.get('color')
      console.log(color); // OUTPUT red
 
    })
 
  }

Merci Krakatoa pour ton aide, j'ai un question:
comment donc récupérer le numéro d'abonnement (payLoad.SUBS_ID) dans le template(abonnement.html) pour le traiter dans le component(detailsAbonnement.ts):

mon template:

Code:

<a routerLink="/details-abonnement/{{payLoad.SUBS_ID}}"><ion-col >{{payLoad.SUBS_ID}}</ion-col></a>

mon component:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 constructor ( private http: HttpClient, public authService: AuthService, private nativeStorage: NativeStorage, public alertController: AlertController, private activatedRoute: ActivatedRoute, private router: Router ) { this.getDetailsAbonnement} getDetailsAbonnement(){ let url = `http://www.site.com/ipeang/?action=GST&customerID=${payLoad.SUBS_ID}`; console.log(url); }
voici ce que je fais, est-ce bien fait?

21/04/2021, 14h52
krakatoa

on trouve pas mal de tuto... faut chercher un peu ;)
21/04/2021, 16h19
krakatoa

par exemple tu tapes : angular 11 routing with parameters

si tu n'y arrive pas, met le code qu'on regarde ça