ngx-toastr 未在第一次点击时显示或 Ui 未在 angular 5 摘要周期中使用 google 地图 api 进行更新

Question

我在 Angular 5 个项目中使用了 ngx-toastr。我有用户表单，通过它我将 LAT 和 LNG 用于用户反向地理编码。这是我代码中的应用条件。

如果找不到城市，那么它应该显示 toastr 消息，但是当我按下提交按钮时，这个 toastr 消息在第一次点击时没有显示，但是当我第二次点击时它出现了.这种行为的原因可能是什么？

这是我的代码：

saveProfile() {
  this.getGeoLocation(this.latitude, this.longitude, (val) => {
    console.log(val)
    l
    if (!val) {
      console.log('val is null')
      this.toastr.error('Latitude  , Logitude is not valid', 'Error')
      return;
    }
    ...
  })
}

这是我的地理编码函数：

getGeoLocation(lat: number, lng: number, cb) {
  let geocoder = new google.maps.Geocoder();
  let latlng = new google.maps.LatLng(lat, lng);

  let request = {
    latLng: latlng
  };
  geocoder.geocode(request, (results, status) => {
    console.log(results)
    if (results.length == 0) {
      cb(null)
    }

    if (status == google.maps.GeocoderStatus.OK) {

      let result = results[0];
      console.log(result)
      let rsltAdrComponent = result.address_components;
      for (let ac = 0; ac < rsltAdrComponent.length; ac++) {
        let component = rsltAdrComponent[ac];
        switch (component.types[0]) {
          case 'locality':
            this.cityName = component.long_name;
            break;
        }
      };
      if (result != null) {
        cb(this.cityName);

      } else {
        cb(null);
      }
    }
  });
}

Answer 1

我正在使用 google 地图 API，它们运行在 angular 的范围之外。所以这是 angular 区域的问题。我为此

使用了区域运行函数

this.ngZone.run(() => {
  this.toastr.warning('This latitude and longitude is not found in selected city! fill 
 the correct one')
 })

ngx-toastr 未在第一次点击时显示或 Ui 未在 angular 5 摘要周期中使用 google 地图 api 进行更新

ngx-toastr not showing up on first click or Ui not updating in angular 5 Digest cycle using google map apis

google-maps

google-geocoder

npm

angular

angular5