Angular 第6步，AGM在谷歌自动完成中选择第一个地址

我在我的角度项目中使用AGM进行谷歌地址建议。如果用户没有选择任何地址，我想选择第一个地址

请大家对此提出一些建议

---

提前谢谢

花了这么多时间寻找解决方案，终于找到了

如果您已经在Angular 2,4 5&6中实现了google地址建议（autocomplete），并且希望默认选择第一个建议，下面我们来看一个工作示例

我们必须单独创建一个服务，并需要订阅它。我在下面给出了一个工作示例

重要提示：耐心地调查并更改名称，所有这些肯定会起作用

---

应用程序组件.ts

从'@angular/core'导入{Component}；
从“@agm/core”导入{MapsAPILoader}；
从“./place prediction.service”导入{PlacePredictionService}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
专用搜索词：字符串；
私人结果：可观察；
testResult=[{description:'test'}，{description:'test'}]；
建造师(
专用mapsAPILoader:mapsAPILoader，
placePredictionService:placePredictionService
){}
onSearch（术语：字符串）{
this.searchTerm=术语；
如果（this.searchTerm==''）返回；
this.results$=this.placePredictionService.getPlacePredictions（术语）；
}
}

---

地点预测.service.ts

从“@angular/core”导入{Injectable}；
从“@agm/core”导入{MapsAPILoader}”；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
导入“rxjs/add/observable/bindCallback”；
@可注射（）
导出类PlacePredictionService{
私有自动完成服务；
构造函数（专用mapsAPILoader:mapsAPILoader）{
这个.mapsAPILoader.load（）。然后（（）=>{
this.autocompleteService=新建
google.maps.places.AutocompleteService（）；
});
}
//Google Places自动完成预测API的包装器，返回
可观察
getPlacePredictions（术语：字符串）：可观察{
返回可观察的。创建（观察者=>{
//API调用
this.autocompleteService.getPlacePredictions（{input:term}，data=>{
让前面的数据：数组；
//数据验证
如果（数据）{
控制台日志（数据）；
以前的数据=数据；
下一步（数据）；
observer.complete（）；
}
//如果没有数据，则发出以前的数据
如果（！数据）{
日志（“以前的数据：”）；
下一步（先前数据）；
observer.complete（）；
//错误处理
}否则{
观察员：错误（状态）；
}
});
});
}
}

---

app.component.html

googleplaces测试
角5&；RxJS复习器

{{searchTerm}}


{{result.description}

---

对我来说，它是有效的，如果你面临任何问题，请添加你的评论（或发邮件给我@saravanava3@gmail.com)，如果我知道您的查询，我将回复

我无法让它工作。可能是因为使用了角度7。下面是我使用BehaviorSubject的尝试

app.module.ts

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“@agm/core”导入{AgmCoreModule}；
从“./app.component”导入{AppComponent}；
@NGD模块({
声明：[
应用组件
],
进口：[
浏览器模块，
AgmCoreModule.forRoot({
apiKey:“您的API密钥”，
图书馆：[“地点”]
})
],
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

---

google-result.model.ts

导出接口GoogleResult{
描述：字符串；
id：字符串；
匹配的_子字符串：匹配的子字符串[]；
place_id:string；
参考：字符串；
结构化格式：结构化格式；
条款：条款[]；
类型：字符串[]；
}
接口项{
偏移量：数字；
值：字符串；
}
接口结构格式{
主文本：字符串；
主文本匹配子字符串：匹配子字符串[]；
辅助文本：字符串；
}
接口匹配子字符串{
长度：数字；
偏移量：数字；
}

---

地点预测服务

从'@angular/core'导入{Injectable}；
从“@agm/core”导入{MapsAPILoader}；
从“rxjs”导入{observeable，BehaviorSubject}；
从“./google result.model”导入{GoogleResult}；
声明：任何；
@注射的({
providedIn:'根'，
})
导出类PlacePredictionService{
私有数据：BehaviorSubject
我认为在getData（）中需要更改，在onSearch（）函数中必须将响应值分配给一个变量，在该变量中，您将获得第一个建议。谢谢！您救了我一天！它非常有效！
import { Component } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { PlacePredictionService } from './place-prediction.service';

import { Observable } from 'rxjs/Observable';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {

  private searchTerm: string;
  private results$: Observable<any[]>;

  testResult = [{description: 'test'},{description: 'test'}];

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private placePredictionService: PlacePredictionService
  ){}

  onSearch(term: string){

  this.searchTerm = term;

  if (this.searchTerm === '') return;

  this.results$ = this.placePredictionService.getPlacePredictions(term);

 }

}

import { Injectable } from "@angular/core";
import { MapsAPILoader } from "@agm/core";

import { Observable } from "rxjs/Observable";

import "rxjs/add/observable/of";
import "rxjs/add/observable/bindCallback";

@Injectable()
export class PlacePredictionService {
  private autocompleteService;

  constructor(private mapsAPILoader: MapsAPILoader) {

    this.mapsAPILoader.load().then(() => {
      this.autocompleteService = new 
      google.maps.places.AutocompleteService();
    });

  }

  // Wrapper for Google Places Autocomplete Prediction API, returns 
  observable

  getPlacePredictions(term: string): Observable<any[]> {
    return Observable.create(observer => {
    // API Call

    this.autocompleteService.getPlacePredictions({ input: term }, data => {
      let previousData: Array<any[]>;

      // Data validation

      if (data) {
        console.log(data);
        previousData = data;
        observer.next(data);
        observer.complete();
      }

      // If no data, emit previous data

      if (!data) {
        console.log("PreviousData: ");
        observer.next(previousData);
        observer.complete();

        // Error Handling

      } else {
        observer.error(status);
      }

    });

    });

    }
  }

<h1>Google Places Test</h1>

<p>Angular 5 &amp; RxJS refresher</p>

<input
  type="search"
  placeholder="Search for place" 
  autocomplete="off"
  autocapitalize="off"
  autofocus
  #search
  (keyup)="onSearch(search.value)"/> 

 <p>{{ searchTerm }}</p>

 <ul>

   <li *ngFor="let result of results$ | async "> {{result.description}} 
   </li>

 </ul>