My form allows me to select events from a drop-down list and choose a date. Depending on the selected date, it retrieves the number of events that occurred on that specific date. If I select an event and a date where events took place, the "All Events" section displays a list of those events. However, if I change the date to one where no events occurred, the "All Events" section does not update and continues to show the previous value fetched from the API. How can I refresh the data in HTML based on the API response?
component.html code
<form [formGroup]="viewForm" (ngSubmit)="infoSubmit(viewForm.value)">
<div class="form-group row">
<div class="col-md-6 txt-box">
<select type="number" class="form-control"
formControlName="Name">
<option value="">Events</option>
<option *ngFor="let Name of listOfEvents"
type="number" [ngValue]="Name.Id" >
{{ Name.Name }}
</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 txt-box">
<div class="dateTime row">
<div class="col-md-3 txt-box">
<input formControlName="dateStart" [owlDateTime]="dt1"
placeholder="Start Date"/>
<span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>
<owl-date-time [showSecondsTimer]="true" #dt1></owl-date-time>
</div>
</div>
</div>
</div>
<button class="a-btns btn btn-success tab-btn" type="submit" >
Submit
</button>
<div class="row">
<table class="table tabs links">
<thead>
<tr>
<th>All Events</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let file of AllEventList"> </tr>
</tbody>
</table>
</div>
</form>
component.ts code
logInfoSubmit(v) {
const Id = v.Name;
if (this.viewForm.valid) {
const dateTime = this.viewForm.value;
let startTimeDate = dateTime.dateStart.toISOString();
const Info = {
PathDirectory: this.tempLog,
StartDate: startTimeDate
};
this.service.getView(Id,Info).subscribe((res: any) => {
if(res.payload == ''){
this.toastrService.info(res.message);
}
else{
this.AllFileList = res.payload;
this.toastrService.info(res.message);
}
});
}
}