Manipuler plusieurs webServices
Bonjour,
J'ai une dernière question à vous poser concernant une petite problématique.
Voici une page HTML
https://zupimages.net/up/22/16/pcaj.png
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:
https://zupimages.net/up/22/16/5dzk.png
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:
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:
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:
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.
