我正在尝试实现Google自动完成搜索，但遇到问题-未捕获的TypeError：无法设置未定义的属性'predictionsNew'？

问题描述

请告诉我如何将这些预测存储在另一个数组中，以便我可以使用它来填充视图。我不知道我在哪里做错了，我是编码新手，请帮助我解决这个问题。

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

解决方法

您必须首先将ForecastsNew定义为全局空数组。

predictionsNew = [];

还要在initService函数上，替换this.predictionsNew;带有this.predictionsNew = [];