Ionic 4 & Angular - модель <ion-input> не обновляется после результата подписки на услугу - PullRequest
Новая
       9

Ionic 4 & Angular - модель <ion-input> не обновляется после результата подписки на услугу

1 голос
/ 15 июня 2019

У меня есть карта Google Maps, обработанная моей страницей Home.Внутри у меня есть заголовок, который находится в независимом компоненте, назовем его Header.Я хочу, чтобы пользователь установил карту поверх места, перетащив ее, и мой компонент заголовка отобразил адрес (довольно классический).

Компонент Header и страница Home (обработка карты) взаимодействуют с помощью службы, называемой AddressService.Этот сервис просто берет координаты с карты и переводит ее в адрес с NativeGeocoder.Header подписался на любой результат этой услуги и затем показывает адрес в <ion-input>.

Проблема в том, что ионный вход каким-то образом не обновит , дажеесли вы печатаете значения, возвращайте хорошие.Волшебным образом, когда я нажимаю на ионный вход, появляется хорошее значение, но иногда, когда нажимается кнопка на другом компоненте (может быть, когда карта Google теряет фокус, уже пробовал, но принудительное его не обновляет ионный вход)).

Другие проблемы такого рода, которые я видел в Интернете, по-видимому, встречаются в более старых версиях Ionic (или в бета-версии).

Вот как сервис вызываетсяHome page: 

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");
      });
  }

И, наконец, вот мой упрощенный Header компонент: 

  start_address: string;
  end_address: string;

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

  ngOnInit() {
    this.start_time = "Hello World" // this shows up
  }

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

И мой Header шаблон компонента: 

<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>

1 Ответ

1 голос
/ 16 июня 2019

решаемые

После поиска часов кажется, что у Ionic4 все еще есть такие небольшие проблемы ... В итоге я использовал NgZone, который был рекомендован для Ionic 3, но не для Ionic 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
  };
...