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>，但它只是输出

〔object Promise〕

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>