我正在尝试实现谷歌自动完成搜索，但面临问题 - 未捕获的类型错误：无法设置未定义的属性'predictionsNew'？

Question

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

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

Answer 1

最初必须将predictionsNew定义为全局空数组。

predictionsNew = [];

同样在initService函数上，替换this.predictionsNew；with this.predictionsNew=[]；