Nativescript getViewById nicht für Zählung Aktualisierung

Question

nach unten

Also, ich den Timer bin mit, dass ich in dieser Frage gefragt, wie ein Countdown: How to stop timer.setinterval with a tap event or leaving page in nativescript

Der Zähler funktioniert, das alles, während ich console.log verwendet haben zu prüfen, wenn es funktioniert und ja es tut, aber ich möchte es in der XML für den Benutzer dieser App zu sehen, um zu sehen. Aber die Zählung wird nicht in der XML aktualisiert.

Hier ist der Code für die Ansicht:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" navigatedTo="navigatedTo" navigatingFrom="onNavigatingFrom" actionBarHidden="true"> 

    <DockLayout orientation="horizontal" horizontalAlignment="center" backgroundColor="black" color="white"> 
     <Label text="Time remaining: " dock="left" margin="5" /> 
     <Label id="timeCount" text="" loaded="pageLoaded"></Label> 
    </DockLayout>  
</Page> 

Und die js Datei hinter:

var time; 
var timeKeep = vm.time; 
var count = 0; 

function timeCountDown() { 
    time = vm.time--;     //this is the value that i need 
    console.log("i is " + time); 
} 

countId = timer.setInterval(() => { 
    timeCountDown(); 
    count += 1; 
    if (count === timeKeep) { 
     timer.clearInterval(countId); 
     dialogs.alert({ 
      title: "Time Up!", 
      message: "You did not finish the test in time.", 
      okButtonText: "OK" 
     }); 
     aemnavigation.goResults(vm.correct); 
    } 
}, 1000); 



//the two lines below is how i get it to show on the xml 

TimeCountScore = page.getViewById("timeCount"); 
TimeCountScore.text = time; 

Der Wert der Zeit zu der Ansicht kommt, aber es ist nicht aktualisiert hat den Wert herunterzählt. Ich console.log (Zeit) um sicherzustellen, dass es immer noch zählt.

Answer 1

Sie sollten Sie data binding, die die Observable-Klasse erbt, wenn eine Eigenschaft geändert wird, wird es auch die XML aktualisieren. Für Ihren Fall, wenn Sie immer noch Ihre Praxis halten möchten, können Sie die label.text innerhalb des Intervalls setzen, um es aktualisiert werden:

TimeCountScore = page.getViewById("timeCount"); 

countId = timer.setInterval(() => { 
    TimeCountScore.text = time; 
}, 1000);