Материал Автозаполнение Угловая остановка вызова API при выборе из опций Автозаполнение

Question

Я использую функцию раскрывающегося меню автозаполнения с угловым заполнением, чтобы заполнить прогноз места в моем раскрывающемся списке. Я использую onChange материала для вызова API из службы, которую я создал. Моя проблема заключается в том, что когда я выбираю прогнозы из поля выбора, на сервер узла запускается вызов API, потому что onChange запускается снова. Итак, я хочу, чтобы остановить вызов Api к услуге, когда опция выбрана из выпадающего списка. Вот код шаблона !!

    <mat-form-field>
       <input matInput type="text" name="location" placeholder="Search By Location" aria-label="Location" [matAutocomplete]="auto" formControlName="location">
       <mat-autocomplete #auto="matAutocomplete" [displayWith]="location">
         <mat-option *ngFor="let places of predictions" (optionSelected)="predictionSelected($event)" [value]="places.description">
           <span>{{places.description}}</span>
         </mat-option>
       </mat-autocomplete>
   <mat-form-field>

И в моем component.ts я написал функцию, которая будет вызывать мои службы карт Google и получать мой прогноз на Change. Я создал функцию события (optionSelected), которая срабатывает при выборе значения из раскрывающегося списка.

predictionFilled = false;
ngOnInit() {
    this.customForm.get('location').valueChanges.subscribe(
      (value) => this.onChangeLocation(value)
    );
  }

  onChangeLocation(location) {
    if ( this.predictionFilled ) {
      return;
    }
    this.googleMapsService.suggestPlaces(location);
    this.placesPredictions = this.googleMapsService.getPredictionsUpdateListener().subscribe((predictions: Places[]) => {
      console.log(predictions);
      this.predictions = predictions;
    });
  }

  predictionSelected(event: any) {
    this.predictionFilled = true;
  }

Проблема в том, что, когда я щелкаю опции в dropDown, событие (optionSelected) запускается после события valueChanges. Технически, событие optionSelected должно срабатывать до onChange, но я не понимаю, почему событие valueChanges вызывается до события optionSelected.

Answer 1

Вы ничего не делаете с event внутри predictionSelection().

. Вы можете просто написать эту единственную строку внутри события formControl valueChanges и удалить (optionSelected)="predictionSelected($event)" из mat element, где оно зарегистрировано.,Также не требуется метод predictionSelected(event : any).

Чтобы прекратить вызов API-вызова, вы можете проверить, существует ли введенное значение в массиве predictions, а затем принять решение.

this.customForm.get('location').valueChanges.subscribe(
      (value) => {
           if (this.predictions.findIndex(value) > -1) {
                  this.predictionFilled = true; // value exists, then do not make api call
           }
           else {
                this.predictionFilled = false; // make api call
           }
           this.onChangeLocation(value);
      }
 );