всегда вызывая API службы при сбросе формы управления в Angular 4 - PullRequest
Новая
       24

всегда вызывая API службы при сбросе формы управления в Angular 4

0 голосов
/ 08 октября 2018

У меня есть компонент ниже, который в основном вызывает внешнюю службу API в ngOnInit - это возвращает массив GIF в this.items.

У меня есть функция applyGif - как только пользователь нажимает наКогда он вызывает эту функцию и сбрасывает форму searchTerm, проблема заключается в том, что каждый раз, когда я вызываю resetSearchBox, чтобы очистить поле ввода текста, он запускает событие valueChanges и снова выполняет gifpickerService.search со строковым значением 'null'- Я не хочу, чтобы это когда-либо вызывалось, если оно не имеет значения - что я делаю неправильно?

Я хочу сбросить форму, но не вызывать search() внутри ngOnInit - что яне так? 

export class GifpickerComponent implements OnInit {
   public searchTerm : FormControl = new FormControl();
   public items: any = [];

   @Output() gifSelected: EventEmitter<any> = new EventEmitter<any>();

   constructor(private gifpickerService: GifpickerService) {}

   ngOnInit() {
       this.searchTerm.valueChanges
          .debounceTime(1000)
          .subscribe(data => {
             this.gifpickerService.search(data).subscribe(response =>{
                 this.items = response;
           })

      })
   }

  applyGif(gif): any {
      let gifMedia = gif.media[0];
      this.gifSelected.emit(gifMedia);
      this.resetSearchBox();
  }

  toggleGifList(): void {
      this.items = [];
  }

  resetSearchBox(): void {
      this.searchTerm.reset();
  }
}

/ * html компонент * / 

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let item of items" [value]="item" class="gif-list-item">
      <img [src]="item.media[0].tinygif.url" (click)="applyGif(item)" />
  </mat-option>
</mat-autocomplete>

1 Ответ

0 голосов
/ 08 октября 2018

Когда вы сбрасываете элемент управления формы, значение изменяется и, таким образом, запускает valueChanges.Вы можете использовать emitEvent: false, что означает, что оно не сработает valueChanges: 

resetSearchBox(): void {
  this.searchTerm.reset(null, { emitEvent: false });
}

Документы: https://angular.io/api/forms/FormControl#reset

...