尝试在打字稿中动态更新html

时间:2020-05-20 01:04:04

标签: html typescript ionic5

我有一个html文件,其中列出了用户的纬度位置。当我单击一个调用打字稿功能的按钮时,当前可以更新html文本。我想要的是将我的函数称为onload,在页面完全加载之前更新文本。我尝试使用onload函数,但是没有运气。这是我的html,假设我正确清理了我的代码,它应该是可复制的:

<ion-app>
  <ion-content [fullscreen]="true">
    <div id="container">
      <h1>Go-To-Gate Reminder</h1>
      <div class="row">
        <ion-icon size="large" name="walk"></ion-icon>
        <p> Walking speed </p>
        <text id="updater"></text>
      </div>
    </div>
  </ion-content>
</ion-app>

这是我的ts文件:

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {
    framework = 'At exact boarding time';

    constructor(private geolocation: Geolocation) {}

// use geolocation to get user's device coordinates
getCurrentCoordinates() {
    this.geolocation.getCurrentPosition().then((resp) => {
        this.latitude = resp.coords.latitude;
        this.longitude = resp.coords.longitude;
    }).catch((error) => {
        console.log('Error getting location', error);
    });

    document.getElementById("updater").innerHTML = '&nbsp' + this.latitude
}

1 个答案:

答案 0 :(得分:0)

尝试从构造函数中调用getCurrentCoordinates方法。