尝试在待办事项列表中实现复选框

Question

尝试实现一个复选框完成我的待办事项列表，但不确定为什么它不起作用。 每当我的代码编译到 Javascript 时，我都会收到此错误：

" src/app/ToDo/todo.component.ts(89,32( 中的错误：错误 TS2339：类型"ToDoComponent"上不存在属性"item"。

我也不确定为什么我的 IDE 说该任务被视为任何语句。

更新：

我的浏览器中的控制台显示此错误：

意外的结束标记"li"。当标记已被另一个标记关闭时，可能会发生这种情况。

打字稿：

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(['']);
}
}

网页代码：

<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}">

在这里，您使用的是打字稿文件中不存在的item。你的意思是使用*ngFor中的todo吗？