Ionic5/角电容器件API

Question

我对Ionic/Angular并不熟悉，我希望能得到一些帮助。

我想要输出的设备电池水平在屏幕上使用电容设备插件，但我不知道如何。我已经成功地将它正确地记录在控制台中，但是不知道我需要做什么来在前端显示它。

我在home.page.ts上的代码是：

import { Component, OnInit } from '@angular/core';
import { Device } from '@capacitor/device';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() { }

  batteryInfo = async () => {
    const batteryInfo = await Device.getBatteryInfo();
    const batteryLevel = batteryInfo.batteryLevel;
    console.log('Battery level: ', batteryLevel*100, '%');
    return batteryLevel;
  }

  ngOnInit() {
    this.batteryInfo();
  }
}

但是现在如何在前端的<ion-label>{{ ? }}</ion-label>中显示这一点呢？

我确实尝试过<ion-label>{{ batteryLevel }}</ion-label>，但它只是输出

对象承诺

Answer 1

你不是在一百万英里之外。您需要声明一个变量，然后在HTML文件中调用该变量。所以在你的情况下：

import { Component, OnInit } from '@angular/core';
import { Device } from '@capacitor/device';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  public battery: number;

  constructor() { }

  async batteryInfo() {
    const batteryInfo = await Device.getBatteryInfo();
    this.battery = batteryInfo.batteryLevel;
  }

  ngOnInit() {
    this.batteryInfo();
  }
}

在HTML文件中，使用Ionic：

<ion-label>{{ battery }}</ion-label>