Discussion :

[Tamzoro]

Bonsoir,

J'ai un webService qui me renvoie des données que j'affiche dans un tableau HTML.
Comme j'ai énormément de lignes dans mon tableau, j'aimerai utiliser 2 inputs pour filtrer les dates.



Je galère toujours à comprendre comment je pourrais filtrer les dates....

Dans le fichier service.ts j'appelle un webservice c'est grâce à celui ci que j'affiche les datas dans le tableau html.

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
@Injectable()
export class HistoricalPricesService {
  private readonly api: string = environment.api;
 
  constructor(private http: HttpClient, private datePipe: ProjetFormatDatePipe) {}
 
  getInstrumentHistoryEquities(svm: string, model: ReturnModel): Observable < InstrumentHistoryResponse > {
    const now = new Date();
    const lastYear = new Date();
    lastYear.setFullYear(now.getFullYear() - 1);
 
    return this.http.post < InstrumentHistoryResponse > (this.api + `/WEBSERVICETITRE`, {
      SVM: parseInt(svm),
      PERIODE: 'XX',
      PERIODEXX: {
        DATEDEBUT: this.datePipe.transform(model.startDate, 'yyyy-MM-dd'),
        DATEFIN: this.datePipe.transform(model.endDate, 'yyyy-MM-dd'),
      }
    }, {
      headers: {
        DoNotSetBusy: ''
      }
    });
  }
}

Ensuite, j'ai créé un fichier return-model.ts pour les deux inputs.

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
export class ReturnModel {
  startDate: Date;
  endDate ? : Date;
 
  constructor() {
    this.endDate = new Date();
    this.startDate = new Date();
    this.startDate.setFullYear(this.endDate.getFullYear() - 5);
  }
 
  verifyStart(): void {
    if (this.endDate && (this.startDate >= this.endDate)) {
      this.endDate = undefined;
    }
  }
}

vocii le fichier historical-prices.component.ts

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
32
33
34
35
36
37
38
39
40
41
42
43
export class HistoricalPricesComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject < void > ();
 
  infoTitle: string = "";
  historicals: Tit;
  lines: HistoryPoint[] = [];
 
  model = new ReturnModel();
 
  constructor(
    private service: HistoricalPricesService,
    private activatedRoute: ActivatedRoute
  ) {}
 
  ngOnInit(): void {
    const svm = this.activatedRoute.snapshot.paramMap.get('svm');
    if (!svm) {
      return;
    }
    this.getPrices(svm);
  }
 
  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
 
  //Display data //
  getPrices(svm: string): void {
    this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        if (res.HISTO.POINT.length > 0) {
          this.lines = res.HISTO.POINT.reverse();
 
          console.log("Display => " + JSON.stringify(res.HISTO.POINT));
        }
      }
    });
  }
 
}

J'ai également un console.log et vous voyez je récupère bien les datas



Si je clique depuis mon browser sur Network > Payload

Je vois bien les 2 inputs (date de début et date de fin)


Maintenant mon problème est que je ne comprends vraiment pas ce que je dois faire dans la méthode getPrices() pour adapter les 2 inputs?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
getPrices(svm: string): void {
  this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
    takeUntil(this.unsubscribe$)
  ).subscribe(res => {
    if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
      if (res.HISTO.POINT.length > 0) {
        this.lines = res.HISTO.POINT.reverse();
 
        console.log("Display => " + JSON.stringify(res.HISTO.POINT));
      }
    }
  });
}

Au niveau HTML, j'ai ceci actuellement avec un message d'erreur....

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
16
17
18
19
20
21
22
23
24
25
26
27
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && getPrices()">
  <div class="row mb-4 align-items-end">
    <div class="col-12 col-sm-6 col-md-4">
      <div class="mb-2">
        <h5>
          Date de départ
        </h5>
        <input id="startDate" name="startDate" type="text" class="form-control form-max-width" [(ngModel)]="model.startDate" bsDatepicker />
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="mb-2">
        <h5>
          Date de fin
        </h5>
        <input id="endDate" name="endDate" type="text" class="form-control form-max-width" [(ngModel)]="model.endDate" bsDatepicker />
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="mb-2">
        <button type="submit" class="btn btn-primary" [disabled]="formulaire.form.invalid">
          Rechercher
        </button>
      </div>
    </div>
  </div>
</form>

Je vous remercie infiniment pour votre aide.

[duke666]

Code :

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

(ngSubmit)="formulaire.form.valid && getPrices()">

et

Code :

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

  getPrices(svm: string): void {

tu vois que getPrices demande un argument