如何在 Angular 4 中以每秒连续变化的 HTML 显示订阅数据

Question

我正在使用 ionic 中的 BLE 本机库。我正在尝试在屏幕上显示heartbeat。我能够记录不断变化的heartrate 值。我想要的是在我的 html 页面上显示实时的 heartrate 值。

这是我的代码

<p>{{ heartrate }}</p>

heartrate: number = 0; // global variable

this.ble.startNotification("EB:53:D1:0A:A0:78", "180D", "2A37").subscribe(
    (buffer) => {
        this.getHeartRateNotifications(buffer);
        console.log(buffer);
    }, 
    (err) => {
        console.log('aa', JSON.stringify(err))
    })


getHeartRateNotifications(buffer) {
    console.log(buffer);
    console.log('array : ', String.fromCharCode.apply(null, new Uint8Array(buffer)));
    const value = new DataView(buffer);

    console.log("I am value: ", JSON.stringify(value));
    const flags = value.getUint8(0);
    console.log('FLAGS', flags);

    if (this.session.isEven(flags)) {
        this.heartRate = value.getUint8(1);
        console.log('HEART RATE 8 bit: ', this.heartRate);
    } else if (this.session.isOdd(flags)) {
        this.heartRate = value.getUint16(2);
        console.log('HEART RATE 16 bit: ', this.heartRate);
    }
}

Answer 1

如果您对 getHeartRateNotification 函数进行一些更改，以下内容应该可以满足您的需求：

this.heartRate$ = this.ble.startNotification("EB:53:D1:0A:A0:78", "180D", "2A37").map((buffer)=> this.getHeartRateNotifications(buffer));

<div class="heart-rate">{{ heartRate$ | async }}</div>

只需在你的函数中设置一个返回值：

getHeartRateNotifications(buffer){
  const value = new DataView(buffer);
  const flags = value.getUint8(0);
  
 if(this.session.isEven(flags)){
   return value.getUint8(1);
 }else if(this.session.isOdd(flags)){
   return value.getUint16(2);
 }
}

然后在组件中输入 heartRate$ 属性作为 Observable

heartRate$: Observable<number>;

等等！