无法在 Angular/Ionic 的表单提交中显示 Google Places place_id

问题描述

我正在使用 Google 地点自动完成功能来返回 Ion-Searchbar 中的一系列地点。除了自动完成的输入之外，表单中的所有内容都提交得很好，它应该是它自己的 place_id 而不是实际输入。如何在表单中提交 place_id 而不是实际输入？代码如下：

add-place.page.ts

import { Component,ngzone } from '@angular/core';
import { FormBuilder,FormGroup } from '@angular/forms';
import { PlacesService } from '../../../services/places.service';
import {} from 'googlemaps';

@Component({
  selector: 'add-place',templateUrl: './add-place.page.html',styleUrls: ['./add-place.page.scss'],})
export class AddplacePage {
  private formCreatePlace: FormGroup;
  GoogleAutocomplete: google.maps.places.AutocompleteService;
  autocomplete: any;
  autocompleteItems: any[];
  location: any;
  placeid: any;
  structuredformatting: any;
  showStorage: any;
  message: String;


  constructor(
    public zone: ngzone,private formBuilder: FormBuilder,private placesService: PlacesService) {
      
    this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
    this.autocompleteItems = [];
    this.formCreatePlace = this.formBuilder.group ({
      autocomplete: [''],type_of_activity: [''],has_owner: [''],deal_available: ['']
    })
  }
  
  updateSearchResults(){
    if (this.autocomplete == '') {
      this.autocompleteItems = [];
      return;
    }
    this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete },(predictions,status) => {
      this.autocompleteItems = [];
      this.zone.run(() => {
        predictions.forEach((prediction) => {
          this.autocompleteItems.push(prediction);
        });
      });
    });
  }
  selectSearchResult(item) {
    console.log(item)
    this.location = item;
    this.placeid = this.location.place_id;
    console.log('Place ID '+ this.placeid)
    this.autocompleteItems = [];
  }

  onSubmit() { 
    this.placesService.create(this.formCreatePlace.value);
  }
}

add-place.page.html

<form [formGroup]="formCreatePlace" (ngSubmit)="onSubmit()"> 
  <ion-grid>
  <ion-row>
    <ion-col size="1">
    </ion-col>
    <ion-col>
      <ion-searchbar animated formControlName="autocomplete" (ngModelChange)="updateSearchResults()" (ionInput)="updateSearchResults()" placeholder="Search for a place"></ion-searchbar>
      <ion-list [hidden]="autocompleteItems.length == 0">
        <ion-item *ngFor="let item of autocompleteItems" tappable (click)="selectSearchResult(item)">
          {{ item.description }}
        </ion-item>
      </ion-list>
    </ion-col>
    <ion-col size="1">
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-form>

解决方法

输入值只是用于从 google api 返回预测的原始文本，我看不到它可以携带 place_id 的方法。当用户像这样点击项目时，您应该将逻辑集中在 selectSearchResult 函数上：

selectSearchResult(item) {
   console.log(item)
   this.location = item;
   this.placeid = this.location.place_id;
   console.log('Place ID '+ this.placeid)
   this.autocompleteItems = [];

   //adjust this part with the object you are expecting
   this.placesService.create(this.placeid);
}