I have a set up check-boxes that many different users can use simultaneously. I poll the server to get the check-box's status every 5 seconds. The problem is that sometimes when I check a box (and make a post request) it is while a get request is being resolved and the view is updating. This essentially "misses" the checkbox click and an unchecked box remains unchecked when a user clicks it. Is there a way around this? is there a way to tell my observable "hey, stop updating the view from the get request when I check my box". I tried unsubscribing to the observable at the beginning of the click() function and then resubscribing after, but aggravated the problem much more.
Brief example of my code: Controller:
ngOnInit(): void {
// get our data immediately when the component inits
this.checklistService.getchecklist()
.first() // only gets fired once
.subscribe(data => {
this.checklist = data;
});
// get our data every subsequent 5 seconds
this.subscription.add(
IntervalObservable.create(5000)
//.takeWhile(() => this.alive) // only fires when component is alive
.subscribe(() => {
this.checklistService.getchecklist()
.subscribe(data => {
this.checklist = data;
});
})
);
}
checkOrUncheck(outgoingItemCheck: ChecklistItem) {
if (outgoingItemCheck.CheckListStepId == null) {
console.log('null ItemId found at checklist with a description of: ' + outgoingItemCheck.description);
}
else {
if (outgoingItemCheck.Checked == null) {
outgoingItemCheck.Checked = true;
}
else {
outgoingItemCheck.Checked = !outgoingItemCheck.Checked; //switch from true to false, or false to true
}
this.checklistService.checkOrUncheck(outgoingItemCheck)
.then(checklistItemFromServer => {
this.checklistItem = checklistItemFromServer;
});
}
}
Service
getchecklist(): Observable<ChecklistItem[]> {
return this.http.get(this.checklistUrl).map(response => response.json());
}
HTML
<label class="custcol3 form-check-label columnchecklistheader columncentertext">
<div *ngIf="clItem.Checked; else notCheckBlock">
<input class="form-check-input" type="checkbox" checked="checked" (click)="checkOrUncheck(clItem)" value="" style="cursor: pointer;">
</div>
<ng-template #notCheckBlock>
<label>
<input class="form-check-input" type="checkbox" (click)="checkOrUncheck(clItem);" value="" style="cursor: pointer;">
</label>
</ng-template>
</label>
