Discussion :

[rickjason]

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é.


Ma démarche:

ma page html

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
      <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 :

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
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

[krakatoa]

ça va, juste quelques points :

(1)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
import { environment ....
 
let url = `${environment.url}/ipingea/?action=GST&customerID=${payLoad.SUBS_ID}`;

(4) async ne sert à rien !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[rickjason]

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

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

[rickjason]

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 :

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
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}`;
 
 
  }

[krakatoa]

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
 
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
 
    })
 
  }

[rickjason]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon component:

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
 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?

[krakatoa]

on trouve pas mal de tuto... faut chercher un peu

[krakatoa]

par exemple tu tapes : angular 11 routing with parameters

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