Trying to implement a checkbox complete into To Do List - html

Question

Trying to implement a checkbox complete to my To Do List but unsure why it is not working.
Whenever my code compiles down to Javascript I get this error:
" ERROR in src/app/ToDo/todo.component.ts(89,32): error TS2339: Property 'item' does not exist on type 'ToDoComponent'. "
Also i'm unsure why my IDE is saying the task is considered an any statement.
UPDATE:
My console in my browser is displaying this error:
Unexpected closing tag "li". It may happen when the tag has already been closed by another tag.
TypeScript:
import { Component, OnInit, EventEmitter, Output } from '#angular/core';
import { ToDo, IToDo } from './todo.model';
import { HttpClient } from '#angular/common/http';
import { LocalStorageService } from '../localStorageService';
import { ActivatedRoute, Router } from '#angular/router';
import { IUser } from '../login/login.component';
import { ToastService } from '../toast/toast.service';
#Component({
// tslint:disable-next-line: component-selector
selector: 'todolist',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class ToDoComponent implements OnInit {
[x: string]: any;
todos: Array<IToDo> = [];
inputtask = "";
toDoParams = '';
localStorageService: LocalStorageService<IToDo>;
currentUser: IUser;
#Output() update: EventEmitter<any> = new EventEmitter();
constructor(
private http: HttpClient,
private activatedRoute: ActivatedRoute,
private router: Router) {
this.localStorageService = new LocalStorageService('todos');
}
private toastService: ToastService;
async ngOnInit() {
const currentUser = this.localStorageService.getItemsFromLocalStorage('user');
console.log('from todos component', currentUser);
if (currentUser == null) {
await this.router.navigate(['login']);
} else {
// if user is logged in go and find any items from local storage and bind
// to the view
const toDoItems = this.localStorageService.getItemsFromLocalStorage('todos');
if (toDoItems && Array.isArray(toDoItems)) {
this.todos = toDoItems;
}
}
}
addToDo(todo: string, cm?: boolean) {
const td = {
id: null,
task: todo,
completed: cm,
}
if (todo === '') {
alert('You must enter in a task TO DO!')
} else {
this.todos.push(td);
}
this.saveItemsToLocalStorage(this.todos);
}
delete(index: number) {
this.todos.splice(index, 1);
console.log("index", index);
this.saveItemsToLocalStorage(this.todos);
}
clear() {
this.todos = [];
console.log('index', this.todos)
this.saveItemsToLocalStorage(this.todos);
}
getItemsFromLocalStorage(key: string) {
const savedToDo = JSON.parse(localStorage.getItem(key));
console.log('from getItemsFromLocalStorage savedItems', savedToDo);
return this.localStorageService.getItemsFromLocalStorage(key);
return savedToDo;
}
completeItem() {
this.update.emit({
task: this.todos,
changes: {completed: this.task.completed}
});
}
saveItemsToLocalStorage(todos: Array<IToDo>) {
todos = this.sortByID(todos);
return this.localStorageService.saveItemsToLocalStorage(todos);
const savedToDo = localStorage.setItem('todos', JSON.stringify(todos));
console.log('from saveItemsToLocalStorage savedToDos: ', savedToDo);
return savedToDo;
}
sortByID(todos: Array<IToDo>) {
todos.sort((prevToDo: IToDo, presToDo: IToDo) => {
return prevToDo.id > presToDo.id ? 1 : -1;
});
console.log('the sorted ToDos', this.todos);
return this.todos;
}
logout() {
// clear localStorage
this.localStorageService.clearItemFromLocalStorage('user');
// navigate to login page
this.router.navigate(['']);
}
}
HTML Code:
<ul class="list-group">
<li *ngFor="let todo of todos; let i = index"
class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
<div class="todo-item">
{{todo.task}} <button type="button" class="btn btn-danger" (click)="delete()">X</button>
<input type="checkbox" class="todo-checkbox" (click)="completeItem()">
<span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
</li>
</ul>

Answer 1

<span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
Here you are using item which doesn't exist in your typescript file. Did you mean to use todo from your *ngFor ?