Ionic5/Angular 电容设备 API

Question

我是 Ionic/Angular 的新手，希望得到一些帮助。

我想使用 Capacitor Device 插件在屏幕上输出设备电池电量，但我不知道如何操作。我已经设法在控制台中正确记录它，但不知道我需要做什么才能在前端显示它。

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

Ionic5/Angular 电容设备 API

Ionic5/Angular Capacitor Device API

ionic-framework

angular

capacitor