ngModel在控制器中更新，但不在视图中更新，角度2

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。 这个问题可能会给您一些提示： 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子属性更改未触发绑定属性 。

希望对您有帮助，蒂埃里