Discussion :

[Tamzoro]

Bonjour,

J'ai une dernière question à vous poser concernant une petite problématique.

Voici une page HTML



J'appelle un WebService, qui récupère le solde dans un tableau HTML temporaire. J'aimerai retirer le tableau HTML et ajouter la valeur du solde dans le input quantité du formulaire.

Mon problème est que j'utilise un autre webService pour envoyer les données du formulaire. Et donc, je ne sais pas comment je pourrais récupérer le solde et l'inclure dans le champ quantité?

Voici un petit shéma des deux méthodes:



Pour info, la méthode getSolde() récupère parfaitement le solde et la méthode submit() envoie bien les données. Je veux juste améliorer l'esthétique et afficher le solde dans le champ quantité.

Voici une idée du code actuel:

Code TYPESCRIPT :

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
 
export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();
 
  details?: AdvTitres[] = [];
 
 
  svm: string | null = null;
  qte: number;
  type: string = '';
  dest: string = '';
 
 
  constructor(   
    private service: InternalTransfertWatchService,
    private activatedRoute: ActivatedRoute,
    private location: Location,
  ) { }
 
  ngOnInit(): void {
    this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
 
    if (!this.svm) {
      this.goBack();
      return;
    }
    this.getSolde();
  }
 
  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
 
  private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
      }
    });
  }
 
  /* Form */ 
  submit(): void {
    this.service.getInternalTransfertStock(parseInt(this.svm!), this.qte, this.type, this.dest).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.goBack();
      }
    });
  }
 
 
  goBack(): void {
    this.location.back();
  }
 
 
}

internal-transfert-watch.component.html

Code ANGULAR :

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
 
<div class="container" *ngIf="details">
    <table class="table table-hover table-striped spaceLeft">
        <tbody>
 
            <tr>
                <th>SVM</th>
                <td>{{details[0].TITRE.SVM}}</td>
                <th>Solde</th>
                <td>{{details[0].SOLDE}}</td>
                <!-- <td>{{details|json}}</td> -->
            </tr>
        </tbody>
    </table>
</div>
 
<div class="card" style="width: 100%;">
    <div class="card-body">
        <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && submit()">
 
            <div class="row row-cols-3 pt-3">
                <div class="col text-end">
                    <label for="qte" class="form-label">Quantité a transférer</label>
                </div>
                <div class="col-4">
                    <input id="qte" name="qte" type="text" class="form-control" style="min-width: 380px" maxlength="25" [(ngModel)]="qte" />
                </div>
            </div>
 
            <div class="row row-cols-3 pt-3">
                <div class="col text-end">
                    <label for="type" class="form-label">Changement Bénéficiaire Économique</label>
                </div>
                <div class="col-4">
                    <select [(ngModel)]="type" name="type" class="form-select">
                        <option value="O">O</option>
                        <option value="">N</option>
                    </select>
                </div>
            </div>
 
 
            <div class="row row-cols-3 pt-3">
                <div class="col text-end">
                    <label for="dest" class="form-label">Compte du destinataire</label>
                </div>
                <div class="col-4">
                    <input id="dest" name="dest" type="text" class="form-control" style="min-width: 380px" maxlength="25" [(ngModel)]="dest" />
                </div>
            </div>
 
            <div class="row row-cols-3 pt-3">
                <div class="col"></div>
                <div class="col text-start">
                    <button type="submit" class="btn btn-primary" style="background-color: #239CD3;" [disabled]="formulaire.form.invalid">Confirmer</button>
                </div>
            </div>
 
        </form>
    </div>
</div>

internal-transfert-watch.response.ts

Code TYPESCRIPT :

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
 
export interface InternalTransfertWatchResponse extends ApiResponse {
    TRANS: AdvTitres[];
  }
 
  export interface AdvTitres {
 
      TITRE: {
          LABEL: string,
          STOCK: string,
          ISIN: string,
          SVM: number,
      },
      SOLDE: number,
      COUPON: number,
      QTE_VENTE: number,
      QTE_BLOQ: number,
      QTE_TRF: number,
 
  }

Je vous remercie pour votre aide.

[krakatoa]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
 
        this.qtte = res.??????????????;  // solde
      }
    });
  }

qtte correspond au ngModel qtte dans le template

[Tamzoro]

Bonjour krakatoa,

Merci pour ton aide. J'ai compris qu'il fallait un moment créer une variable pour stocker la valeur du SOLDE.

Dans ton code, tu mets plusieurs points d'interrogations???

Code TYPESCRIPT :

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

 this.qtte = res.??????????????;  // solde

Je présume que je dois refaire une requête pour récupérer les datas du solde. Mais je ne comprends pas en fait, comment je récupère le solde dans this.qtte?

Parce que là, je récupère toutes les variables....

Code TYPESCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 qtte: AdvTitres[];
 ...
 private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
        this.qtte = res.TRANS;  // solde
        console.log("Bonjour")
        console.log(this.qte)
      }
    });
  }

Ensuite, dans le formulaire, j'ai le message [OBJECT, OBJECT]

Code ANGULAR :

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

<input id="qte" name="qte" type="text" class="form-control" style="min-width: 380px" maxlength="25" [(ngModel)]="qtte" />

[krakatoa]

Code :

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

1
2
 
this.qtte = res[0]["solde"];

est ce que tu peux oublier TRANS

[Tamzoro]

Oui désolé...

J'ai essayé d'ajouter la ligne

Code ANGULAR :

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

this.qtte = res[0]["solde"];

En console log, j'obtiens le message suivant:

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'solde')

J'ai essayé en minuscule et en majuscule...

Code ANGULAR :

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

1
2
3
4
5
6
7
8
9
10
11
private getSolde(): void {
    this.service.getSolde(this.svm!).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.details = res.TRANS;
        console.log("Test 1")
        this.qtte = res[0]["solde"];
      }
    });
  }

Si tu as une autre solution, je suis vraiment intéressé.

Merci d'avance

[dukoid]

en majuscule solde
regarde bien les données