-2

Please tell me how to store those predictions in one more array so that i can use that to populate in view. i don't know where iam doing wrong, iam new to coding, please help me fixing this.

                 <input type="text" placeholder="Pick one" (input)="initService($event)" aria-label="Number" matInput
                    [formControl]="myControl" formControlName="source" [matAutocomplete]="auto">
                  <mat-autocomplete #auto="matAutocomplete">
                    <mat-option *ngFor="let option of predictionsNew" 
                    [value]="option.description" (onSelect)="stopselect($event, 's');">
                      {{option.description}}
                    </mat-option>
                  </mat-autocomplete>


initService(event) {
    this.predictionsNew;
    if (event.target.value.length > 3) {

      const displaySuggestions = function (
        predictions: google.maps.places.QueryAutocompletePrediction[],
        status: google.maps.places.PlacesServiceStatus
      ) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          alert(status);
          return;
        }
        this.predictionsNew = (predictions); //here iam getting error - Uncaught TypeError: Cannot set property 'predictionsNew' of undefined?
 
      };

      const service = new google.maps.places.AutocompleteService();
      service.getQueryPredictions({ input: event.target.value }, displaySuggestions);
    }
  }
sri
  • 1
  • I think it's because displaySuggestions is a function so "this" inside it is not what you think it is. try service.getQueryPredictions({ input: event.target.value }, displaySuggestions.bind(this)); – ihor.eth Aug 18 '20 at 13:49
  • 1
    It worked thank you @ihorbond – sri Aug 18 '20 at 14:20

1 Answers1

0

You have to define predictionsNew as a global empty array initially.

predictionsNew = [];

Also on initService function, replace this.predictionsNew; with this.predictionsNew = [];

vishnu s pillai
  • 101
  • 4