Класс HTML не обновляется после завершения метода в файле .ts - PullRequest
1 голос
/ 01 октября 2019

У меня есть следующий HTML-файл, который отображает изображение карт Google.

<div class = 'Pick' >
    <ion-img class='location-image' [src]="selectedLocationImage" > </ion-img>
</div>

и в ngOninit я вызываю следующие методы, которые должны обновить строку selectedLocationImage.

   latitude: any;
  longitude: any;
  selectedLocationImage: string;
  ngOnInit() {
 this.getlocation(this.deviceinfo.currentdevice).then(response => {this.createPlace(this.latitude, this.longitude); }).catch(err => {});
}

после завершения этого метода selectedLocationImage был успешно обновлен, но изображение на моей странице вообще не обновляется. Этот метод занимает секунду или две, и поэтому я считаю, что изображение не обновляется в файле HTML. Как я могу установить html для постоянного мониторинга строки selectedLocationImage и соответственно обновить ion-inage?

Если я просто устанавливаю defualt selectedLocationImage на astart, он работает нормально, но когда метод делает это, требуется несколькосекунд, а затем он не обновляется

Редактировать: здесь запрашивается метод createPlace.

private createPlace(lat: number, lng: number) {
const pickedLocation: DeviceLocation = {
  // tslint:disable-next-line: object-literal-shorthand
  lat: lat,
  // tslint:disable-next-line: object-literal-shorthand
  lng: lng,
  address: null,
  staticMapImageUrl: null
};

this.isLoading = true;
this.getAddress(lat, lng)
  .pipe(
    switchMap(address => {
      pickedLocation.address = address;
      return of(
        this.getMapImage(pickedLocation.lat, pickedLocation.lng, 14)
      );
    })
  )
  .subscribe(staticMapImageUrl => {

    pickedLocation.staticMapImageUrl = staticMapImageUrl;
    this.selectedLocationImage = staticMapImageUrl;
    this.isLoading = false;
    this.locationPick.emit(pickedLocation);
  });
}

1 Ответ

0 голосов
/ 01 октября 2019

Все, что вам нужно сделать, это поместить структурную директиву *ngIf в родительский элемент div следующим образом:

<div class = 'Pick' *ngIf="selectedLocationImage">
   <ion-img class='location-image' [src]="selectedLocationImage" > </ion-img>
</div>

, чтобы весь родительский элемент с изображением не отображался, если не существует значения.

происходит то, что вы пытаетесь сопоставить undefined с источником изображения, и оно не обновляется, если поле обновляется.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...