Good evening,

I have a webService that returns data which I display in an HTML table. As I have a lot of rows in my table, I would like to use 2 inputs to filter the dates.

In the service.ts file I call a webservice to display the data in the html table.

@Injectable()
export class HistoricalPricesService {
  private readonly api: string = environment.api;
 
  constructor(private http: HttpClient, private datePipe: NekorFormatDatePipe) { }
 
  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: '' } });
  }
}

Then I created a return-model.ts file for the two inputs (start date and end date).

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

The historical-prices.component.ts file

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

On the console.log I retrieve the data

If I click from my browser on Network > Payload

I can clearly see the 2 inputs (start date and end date)

Now my problem is that I really don't understand what I have to do in the getPrices() method to fit the 2 inputs?

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

At the HTML level, I currently have this with an error message....

<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && getPrices()">
<div >
   <div >
      <div >
         <h5>
            Date de départ
         </h5>
         <input id="startDate" name="startDate" type="text"  [(ngModel)]="model.startDate" bsDatepicker />
      </div>
   </div>
   <div >
      <div >
         <h5>
            Date de fin
         </h5>
         <input id="endDate" name="endDate" type="text"  [(ngModel)]="model.endDate" bsDatepicker />
      </div>
   </div>
   <div >
      <div >
         <button type="submit"  [disabled]="formulaire.form.invalid">
         Rechercher 
         </button>
      </div>
   </div>
</div>
</form>

Thank you very much for your help.

CodePudding user response：

It looks as though your getPrices() function expects one argument.

It seems like you might want to store svm at class level, for example:

private svm: string;

And then change your getPrices() method to use the svm class property:

getPrices(): void {
    this.service.getInstrumentHistoryEquities(this.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));
        }
      }
    });
  }

CodePudding user response：

make it optional! getPrices(svm?: string), you can avoid the error of expecting 1 argument but got 0 by making it optional.