Question

我的观点中有一个输入：

  <label for="map-latitude_input">Latitude {{mapLatitudeInput}}</label>
  <input
    type="text"
    placeholder="00.000"
    [(ngModel)]="mapLatitudeInput"
    [ngFormControl]="newListingForm.find('mapLatitudeInput')"
    id="map-latitude_input"
    class="transparent">

在我的控制器内部，我正在收听来自google maps api的地图拖动事件。在拖动时，我想更新输入内部及其关联标签中的值。目前这看起来像这样：

//Update coordinates on map drag
map.addListener('drag', (event) => {
  this.mapLatitudeInput = map.getCenter().lat();
  console.log(this.mapLatitudeInput);
});

现在当我拖动地图控制台时，我会一直移动输出正确的值，但是在我的视图中它保持完全相同。我还注意到，如果我拖动地图并执行某些操作，例如在我的输入所在的同一表单中的选择菜单中选择一个选项，它会更新mapLatitudeInput以更正值，我不知道为什么这样做发生了，但我想我会提到它。

Answer 1

这可能是由于ZoneJS造成的。这个问题可以给你一些提示：View is not updated on change in Angular2。

从哪里获取地图实例。如果它在区域外实例化，Angular2将无法检测mapLatitudeInput属性的更新。

你可以尝试类似的东西：

export class MapComponent {
  constructor(ngZone:NgZone) {
    this.ngZone = ngZone;
  }

  map.addListener('drag', (event) => {
    this.ngZone.run(() =>
      this.mapLatitudeInput = map.getCenter().lat();
      console.log(this.mapLatitudeInput);
    });
  });

此问题也可能与您的问题有关：Angular2 child property change not firing update on bound property。

希望它可以帮到你，亨利

ngModel在控制器中更新，但在视图中没有更新，角度为2

1 个答案: