Angular 4 Google Maps API formcontrol 更新问题答案

【问题标题】：Angular 4 Google Maps API formcontrol update issueAngular 4 Google Maps API formcontrol 更新问题
【发布时间】：2017-11-01 15:51:03
【问题描述】：

我一直在尝试创建最简单的自动完成输入，用户可以在其中写下地址，点击 Google Maps API 下拉列表中的特定值，并在填补其他空白后，他/她能够保存响应式表单 onClick。

但是，我无法将适当的值注入 FormControl。当用户写下“Washi”并点击“Washington D.C.”时输入中显示的值是正确的，但是当我保存表单时，我在 Firebase 数据库中得到“Washi”而不是“Washington D.C.”。这是我的代码：

<input id="address" type="text" class="form-control"  formControlName="address" />

在 xxxxx.component.ts 中：

ngAfterViewInit(){

  let input = <HTMLInputElement>document.getElementById("address");

  this.mapsAPILoader.load().then(
    () => {
      let autocomplete = new google.maps.places.Autocomplete(input, {types: ['address']});

      autocomplete.addListener( 'place_changed', () => {

        const place = autocomplete.getPlace();
        this.ngZone.run(() => {

          this.cd.detectChanges();
          this.myGroup.value.address = place.formatted_address;
          console.log(this.myGroup.value.address);
        });
      });
    }
  );}

响应式表单已加载 OnInit，一切似乎都运行良好。 Console.log 显示正确的值，但不是传输到数据库的值。这是保存功能：

save(myGroup: NgForm){

    this.user = this._firebaseAuth.authState;
    this.user.subscribe(
        (user) => {
            if (user) {
                this.userDetails = user;

                this.first.subscribe(snapshot => {

                        if (snapshot.exists() === false) {

                            firebase.database().ref('path').set({
                                record: this.myGroup.value
                            });

                        } else {
                            this.userDetails = null;
                        }
                    }
                );
            }
        }
    );

}

有什么想法吗？

【问题讨论】：

标签： angular google-maps google-maps-api-3 angular4-forms

【解决方案1】：

如果有人有兴趣了解解决方案，我所要做的就是添加帮助变量来保存 google 自动完成的值。然后（onClick）我声明FormControl的值和help var的值是一样的。

【讨论】：