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子屬性更改未觸發綁定屬性 。

希望對您有幫助，蒂埃里