Nativescript checkbox not checking when clicked

I'm writing an app using nativescript (typescript/angular) and have a listview where each item has a checkbox. Whenever I click the checkbox though it appears as if the checkbox is about to toggle but it then just remains the same (unless I fully close and reopen the app, where it will then properly show the checkbox checked/unchecked).

I believe this has something to do with the fact that I'm trying to store the boolean values for the checkbox in application settings and then use that for the "checked" value.

<ListView [items]="todoList" class="small-spacing">
<ng-template let-item="item">
    <GridLayout columns="auto, *, auto" rows="auto, 25" verticalAlignment="top">
        <CheckBox #CB1 [checked]="item.isDone" (tap)="check(item.todoText, item.dateCreated, item.id, item.isDone)" rowSpan="2" width="72" height="72" margin="3" verticalAlignment="top"></CheckBox>
        <Label [text]="item.todoText" class="label-name" textWrap="true" col="1" colSpan="2" rowSpan="2" minHeight="50" fontSize="20" verticalAlignment="center" margin="3"></Label>
        <Label [text]="setDate(item.dateCreated)" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label>
        <Image src="img.png" (tap)="delete(item.id, item.todoText)" col="1" row="1" horizontalAlignment="right" width="10%" height="100%" marginRight="10"></Image>
    </GridLayout>
</ng-template>

The check function is called whenever a checkbox is tapped. It is used to switch the boolean value for "checked"/"isDone" and store that.

check(text, date, id, curBool){
    var temp = false;
    if(!curBool){
        temp = true; 
    }

    const item = {
        todoText: text,
        isDone: temp,
        dateCreated: date,
        id: id
    }

    this.todoList.splice(this.todoList.findIndex(x => x.id == item.id), 1, item);
    ApplicationSettings.setString("todo", JSON.stringify(this.todoList));
}