角度-未捕获的错误:模板解析错误:没有将“ exportAs”设置为“ ngModel”的指令

时间:2019-09-19 21:04:42

标签: angular google-maps

我想在Angular-7应用程序中应用Google Place自动完成搜索功能。经过几次研究,我能够编写以下代码:

app.module.ts

import { GooglePlaceModule } from 'ngx-google-places-autocomplete';
import { AgmCoreModule } from '@agm/core';

imports: [
 GooglePlaceModule,
AgmCoreModule.forRoot({
  apiKey: 'the key',
  libraries: ['places']
}),
],

client.component.ts

import { Component, OnInit, ElementRef, NgZone, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../shared/services/api.service';
import { TokenService } from '../../shared/services/token.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
import swal from 'sweetalert2';
import { FormControl } from "@angular/forms";
import { MapsAPILoader } from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-client-quotes-landing',
  templateUrl: './client-quotes-landing.component.html',
  styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {

public latitude: number;
public longitude: number;
public searchControl: FormControl;
public zoom: number;

@ViewChild("search")
public searchElementRef: ElementRef;

formattedAddress = '';
truck_types = [];

public form = {
 first_name : null,
 last_name : null,
 email : null,
 phone : null,
 address : null,
 business_name : null,
 truck_required : null,
 truck_type : null,
 quote_origin : null,
 quote_destination : null,
 commodity : null,
 loading_date : null,
 comment : null,
};

constructor(
 private api: ApiService,
 private token: TokenService,
 private router: Router,
 private notify: SnotifyService,
 private mapsAPILoader: MapsAPILoader,
 private ngZone: NgZone
 ) {
   }

 ngOnInit() {

//set google maps defaults
 this.zoom = 4;
 this.latitude = 8.6753;
 this.longitude = 9.0820;

 //create search FormControl
 this.searchControl = new FormControl();

 //set current position
 this.setCurrentPosition();

 //load Places Autocomplete
 this.mapsAPILoader.load().then(() => {
  let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
    types: ["address"]
  });
  autocomplete.addListener("place_changed", () => {
    this.ngZone.run(() => {
      //get the place result
      let place: google.maps.places.PlaceResult = autocomplete.getPlace();

      //verify result
      if (place.geometry === undefined || place.geometry === null) {
        return;
      }

      //set latitude, longitude and zoom
      this.latitude = place.geometry.location.lat();
      this.longitude = place.geometry.location.lng();
      this.zoom = 12;
    });
   });
  });
 }

private setCurrentPosition() {
 if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
    this.zoom = 12;
  });
}
}

onSubmit(){
 this.notify.clear();
 // this.notify.info('Wait...', {timeout: 0});
 var header = {
  'Content-Type': 'application/json'
 }
 return this.api.post('clientquotelanding', this.form, header).subscribe(
   data => this.tokenHandler(data),
   error => this.errorHandle(error)
  );
 }

client.component.html

<div class="col-xs-6">
  <label for="quote_destination">Destination<span style="color:red;"> *</span></label>
  <input type="text" autocorrect="off" autocapitalize="off" spellcheck="off" #search [formControl]="searchControl" class="form-control" id="quote_destination" placeholder="Destination" name="quote_destination" [(ngModel)]="form.quote_destination" #quote_destination="ngModel" [ngClass]="{'is-invalid' : quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)}"   required>
  <div class="form-feedback" *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.submitted)" class="invalid-feedback">
  <div style="color:red;" *ngIf="quote_destination.errors?.required"class="alert alert-danger">Destination is required.</div>
  </div>
</div>

上面的代码是第55行。单击提交按钮时,出现此错误:

google error

我不能仅仅理解错误的原因。如何解决此错误?

0 个答案:

没有答案