时间戳

首页 > 解决方案 > 无法在 Angular/Ionic 的表单提交中显示 Google Places place_id

angular - 无法在 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>

标签： angulargoogleplacesautocomplete

解决方案

输入值只是用于从 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);
}

推荐阅读