Блог

У меня есть форма, в которой я выбираю события из выпадающего списка и выбираю данные. На основе даты он извлекает количество событий, произошедших на эту дату. Когда я выбираю событие и выбираю дату, если события есть, он выдает список событий в разделе «Все события». Но когда я меняю дату, на которую не происходит никаких событий, раздел «Все события» не обновляется и выдает предыдущее значение, поступающее из api. Как обновить данные в html на основе ответа api??

component.html код

           <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 код

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

Насколько я понимаю, вы вызываете свою службу только для получения событий один раз.

Добавьте свойство (onClick) к кнопке отправки и снова вызовите свою службу с новой датой начала.