Задержка с привязкой свойства в приложении NativeScript Angular - PullRequest
Новая
       40

Задержка с привязкой свойства в приложении NativeScript Angular

0 голосов
/ 09 декабря 2018

Я создаю приложение NativeScript Angular с плагином nativescript-шагомера.Я создал Observable, чтобы сообщать о новых шагах.Когда поступают сообщения о новых шагах, я записываю номер на консоль, обновляю свойство компонента Home и вызываю ApplicationRef.tick().

Номер в пользовательском интерфейсе меняется, но только после задержки не менее пятисекунды, а иногда и минуты, между временем, когда я вижу его в консоли, и временем, которое я вижу в пользовательском интерфейсе.

Вместо ApplicationRef.tick() я также попытался NgZone.run(callback) и ChangeDetectorRef.detectChanges().Есть задержка с любым из них.Если я не включу ни одного из них, пользовательский интерфейс никогда не обновляется.

Я должен упомянуть, что я проверял это только на устройствах iOS и точно не знаю, произойдет ли эта проблема на Android.

Вот home.component.ts: 

import { Component, OnInit, ApplicationRef } from "@angular/core";
import { Pedometer } from "nativescript-pedometer";
import { Observable } from "rxjs";
import { take } from "rxjs/operators";

@Component({
  selector: "Home",
  moduleId: module.id,
  templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
  numSteps: number;
  pedometer: Pedometer;

  constructor(private applicationRef: ApplicationRef) {}

  ngOnInit(): void {
    this.numSteps = 0;
    this.pedometer = new Pedometer();

    this.startUpdates().subscribe(response => {
      console.log('New step count received from pedometer:');
      console.log(response.steps);
      this.numSteps = response.steps;
      this.applicationRef.tick();
    });
  }

  startUpdates(): Observable<any> {
    return Observable.create(observer => {
      this.pedometer.startUpdates({
        onUpdate: result => observer.next(result)
      });
    }).pipe(take(25));
  }
}

А вот home.component.html: 

<StackLayout>
    <Label text="Number of steps is:"></Label>
    <Label [text]="numSteps"></Label>
</StackLayout>

1 Ответ

0 голосов
/ 09 декабря 2018

onUpdate вызывается из фонового потока, а Angular находится в потоке пользовательского интерфейса.Попробуйте это, 

startUpdates(): Observable<any> {
 return Observable.create(observer => {
  this.pedometer.startUpdates({
    onUpdate: result => Promise.resolve().then(() => observer.next(result))
  });
 }).pipe(take(25));
}

Promise.resolve() форсирует блок в поток пользовательского интерфейса.

...