Discussion :

[angie13003]

Bonjour,

J'ai un bouton qui change en fonction du status quand je clique dessus.
Cette fonction marche nickel, quand je clic le changement s'effectue bien dans la bdd. Par contre au niveau de l'affichage il reste sur l'ancien status, pour voir le nouveau stau s'afficher, il faut que je change de page et que je revienne sur celle-ci.
Moi j'aimerais rester sur la page et faire un switch entre les deux status directement.

du coup mon nouveau de mon component.ts je fais appel comme ceci à ma fonction

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
  onSwitchPartner(): void {
    const updateStatus = {
      idPartner: this.idPartner,
      statusPartner: 'Partenaire'
    }
    console.log('récupération des données à envoyer au back', updateStatus);
    this.partnerService.updateStatus(updateStatus);
  }
 
  onSwitchNoPartner(): void {
    const updateStatus = {
      idPartner: this.idPartner,
      statusPartner: 'Non partenaire'
    }
    console.log('récupération des données à envoyer au back', updateStatus);
    this.partnerService.updateStatus(updateStatus);
  }
}

au niveau de HTML j'ai mais deux button

Code html :

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

1
2
3
4
5
6
        <div class="m-auto">
            <button style="font-size: 12px;" (click)="onSwitchPartner()" *ngIf="statusPartner === 'Non partenaire'">Partenaire</button>
        </div>
        <div class="m-auto">
            <button style="font-size: 12px; background-color: #b1b1b1; border: #b1b1b1;" (click)="onSwitchNoPartner()" *ngIf="statusPartner === 'Partenaire'">Non partenaire</button>
        </div>

et au niveau de mon service je fais appel à mon back

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
  emitPartnerSubject(){
    this.partnerSubject.next(this.partners);
  }
 
  updateStatus(partner) {
    return this.httpClient.post(`${this.baseUrl}/updateStatus.php`, partner).subscribe(
      () => {
        console.log('envoie des données au back', partner);
        console.log('enregistrement ok');
        this.emitPartnerSubject();
      },
      (error) => {
        console.log('envoie des données au back', partner);
        console.log('erreur de sauvegarde' + error);
      }
    );
  }

[krakatoa]

(1)
tu emets ici un nouveau

Code :

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

1
2
3
 emitPartnerSubject(){
    this.partnerSubject.next(this.partners);
  }

tu souscrits aprés ?



(2)
à quel moment statusPartner du ngIf est renseigné avec la nouvelle valeur ?

Code html :

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

1
2
3
4
5
6
7
statusPartner ={{statusPartner }}
<div class="m-auto">
            <button style="font-size: 12px;" (click)="onSwitchPartner()" *ngIf="statusPartner === 'Non partenaire'">Partenaire</button>
        </div>
        <div class="m-auto">
            <button style="font-size: 12px; background-color: #b1b1b1; border: #b1b1b1;" (click)="onSwitchNoPartner()" *ngIf="statusPartner === 'Partenaire'">Non partenaire</button>
        </div>

[angie13003]

alors pour le 1 je fais une souscription dans la fonction update

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  updateStatus(partner) {
    return this.httpClient.post(`${this.baseUrl}/updateStatus.php`, partner).subscribe(
      () => {
        console.log('envoie des données au back', partner);
        console.log('enregistrement ok');
        this.emitPartnerSubject();
      },
      (error) => {
        console.log('envoie des données au back', partner);
        console.log('erreur de sauvegarde' + error);
      }
    );
  }

mais par contre pour le 2 je ne vois absolument pas comment faire. j'ai testé plein de chose mais à chaque fois j'avais des erreur et donc impossible de compiler

[krakatoa]

petite re écriture :

Code html :

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

1
2
3
4
        <div class="m-auto">
            <button *ngIf="statusPartner === 'Non partenaire'"  (click)="onSwitchPartner()" style="font-size: 12px;">Partenaire</button>
            <button *ngIf="statusPartner === 'Partenaire'" (click)="onSwitchNoPartner()" style="font-size: 12px; background-color: #b1b1b1; border: #b1b1b1;" >Non partenaire</button>
        </div>

ici, tu changes: statusPartner d'une valeur à une autre
mais à aucun moment la vue est informé du changement

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
 onSwitchPartner(): void {
    const updateStatus = {
      idPartner: this.idPartner,
      statusPartner: 'Partenaire'
    }
    console.log('récupération des données à envoyer au back', updateStatus);
    this.partnerService.updateStatus(updateStatus);
  }
 
  onSwitchNoPartner(): void {
    const updateStatus = {
      idPartner: this.idPartner,
      statusPartner: 'Non partenaire'
    }
    console.log('récupération des données à envoyer au back', updateStatus);
    this.partnerService.updateStatus(updateStatus);
  }

dans la vue : *ngIf="statusPartner === 'Non partenaire'"

dans le code, ou affecte tu la variable : statusPartner avec la nouvelle valeur ? ('Non partenaire' ou 'Non partenaire')