Angular 爱奥尼亚4&；角度-<；离子输入>；服务订阅结果后模型未更新

我的

主页

页面处理了一张谷歌地图。我在里面有一个标题，它位于一个独立的组件中，我们称它为

header

。我希望用户通过拖动地图和我的标题组件来显示地址，从而将地图设置在某个位置上（非常经典）

标题

组件和

主页

页面（处理地图）都通过名为

地址服务

的服务进行通信。此服务仅从地图中获取坐标，并使用

NativeGeocoder

将其转换为地址。

标题

已订阅此服务的任何结果，然后在

中显示地址

问题是，离子输入不会以某种方式更新，即使打印的值返回的是好的值。神奇的是，当我按下ion输入时，良好的值会显示出来，但有时也会按下另一个组件上的按钮（可能是当google地图失去焦点时，已经尝试过了，但强制它不会刷新ion输入）

我在互联网上看到的其他此类问题似乎都发生在旧版本的Ionic（或beta版）中

以下是

主页

页面调用服务的方式：

onMapWasDragged(params: any[]) {
    if (this.tab == "path") {
      this.mapCenterCoords = this.map.getCameraTarget();
      this.addressService.setCoords(this.mapCenterCoords);
    }
  }

以下是服务

AddressService

的工作原理：

  private addressSetSource = new Subject<string>();

  addressSet$ = this.addressSetSource.asObservable();

  setCoords(coords: ILatLng) {
    this.geocoder
      .reverseGeocode(coords.lat, coords.lng, this.options)
      .then((result: NativeGeocoderResult[]) => {
        console.log(JSON.stringify(result[0]));
        let address =
          result[0]["subThoroughfare"] +
          ", " +
          result[0]["thoroughfare"] +
          ", " +
          result[0]["locality"];
        this.addressSetSource.next(address);
      })
      .catch((error: any) => {
        console.log(error);
        this.addressSetSource.next("Error");
      });
  }

和我的

标题

组件模板：

<ion-item color="primary">
  <ion-icon name="arrow-back" (click)="back()"></ion-icon>
</ion-item>
<ion-grid id="path-grid" color="primary">
  <ion-item color="primary">
    <ion-col size="2" align-self-center>
      <ion-label color="light">Start</ion-label>
    </ion-col>
    <ion-col size="10">
      <ion-input
        class="padding-input"
        [(ngModel)]="this.start_address" <!-- HERE -->
      ></ion-input>
    </ion-col>
  </ion-item>
  <ion-item color="primary">
    <ion-col size="2" align-self-center>
      <ion-label color="light">End</ion-label>
    </ion-col>
    <ion-col size="10">
      <ion-input class="padding-input">{{ this.end_address }}</ion-input>
    </ion-col>
  </ion-item>
</ion-grid>

开始
已解决

经过数小时的搜索，Ionic4到目前为止似乎仍然存在这种小问题。。。
我最终使用了NgZone，它被推荐用于离子3，但不用于离子4

constructor(private addressService: AddressService,
  private zone: NgZone) {
  addressService.addressSet$.subscribe(this.onAddressChanged.bind(this));
}

onAddressChanged = (address: any): void => {
    console.log("Setting start address to: " + address);
    this.zone.run(() => {
      this.start_address = address;
    });
    console.log("Test: " + this.start_address); // this works too
  };

constructor(private addressService: AddressService,
  private zone: NgZone) {
  addressService.addressSet$.subscribe(this.onAddressChanged.bind(this));
}

onAddressChanged = (address: any): void => {
    console.log("Setting start address to: " + address);
    this.zone.run(() => {
      this.start_address = address;
    });
    console.log("Test: " + this.start_address); // this works too
  };