angular - Angular 应用程序也不显示任何内容，但应用程序未加载

Question

我正在构建一个有角度的 Todo 应用程序。在我添加本地存储内容之前，该应用程序运行良好。你能说一下可能出了什么问题。下面是服务文件。该应用程序添加任务，删除任务，将任务标记为已完成，过滤任务 n 等等

预期的。该应用程序应该执行所有上述任务实际：localhost：4200 不断重新加载，但应用程序没有打开

todo.service.ts

export class TodoService {
todoTitle: string = '';
idForTodo: number;
filter: string = 'all';
anyRemainingModel: boolean = true;


constructor() {
let todos = this.getTodos();

  if (todos.length == 0) {
    this.idForTodo = 0;
  } else {
    let maxId = todos[todos.length-1].id;
    this.idForTodo = maxId + 1;
  }}

public getTodos(): Todo[] {
  let localStorageItem = JSON.parse(localStorage.getItem('todos'));
  return localStorageItem == null ? [] : localStorageItem.todos;
}

addTodo(todoTitle: string): void {
if (todoTitle.trim().length === 0) {
  return;
}
let todos = this.getTodos();
todos.unshift({
  id: this.idForTodo,
  title: todoTitle,
  completed: false,
  editing: false
})
this.setLocalStorageTodos(todos);
this.idForTodo++;
}

this.anyRemainingModel = this.anyRemaining();
todo.editing = false;
}

deleteTodo(id: number): void {
let todos = this.getTodos();
todos = todos.filter(todo => todo.id !== id);
this.setLocalStorageTodos(todos);
}

remaining(): number {
let todos = this.getTodos();
return todos.filter(todo => !todo.completed).length;
}

atLeastOneCompleted(): boolean {
let todos = this.getTodos();
return todos.filter(todo => todo.completed).length > 0;
}

clearCompleted(): void {
 let todos = this.getTodos();
todos = todos.filter(todo => !todo.completed);
}

checkAllTodos(): void {
let todos = this.getTodos();
todos.forEach(todo => todo.completed = (<HTMLInputElement>event.target).checked)
this.anyRemainingModel = this.anyRemaining();
}



todosFiltered(): Todo[] {
let todos = this.getTodos();
if (this.filter === 'all') {
  return todos;
} else if (this.filter === 'active') {
  return todos.filter(todo => !todo.completed);
} else if (this.filter === 'completed') {
  return todos.filter(todo => todo.completed);
}

return todos;
}
private setLocalStorageTodos(todos: Todo[]): void {
  localStorage.setItem('todos', JSON.stringify({ todos: todos }));
 }
}

标签： angularlocal-storage