Ionic5/Angular 电容设备 API答案

【问题标题】：Ionic5/Angular Capacitor Device APIIonic5/Angular 电容设备 API
【发布时间】：2021-08-27 19:29:12
【问题描述】：

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

[对象承诺]

【问题讨论】：

标签： angular ionic-framework capacitor

【解决方案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>

【讨论】：