在Angular中添加/删除/编辑列表项时自动更新视图

如何解决在Angular中添加/删除/编辑列表项时自动更新视图

我正在Angular中做一个待办事项应用程序。现在，我可以使用添加/删除/编辑功能，但是每次都必须刷新网页才能看到更改。

我想要这样，以便一旦添加待办事项列表项，用户就可以自动看到添加到列表中的项目，而不必每次都刷新页面。删除和编辑项目也是如此。

这是我下面的HTML：

<div>
  <input type="text" value={{toDoItem}} [(ngModel)]="toDoItem">
  <button (click)="addToDo()">Add to List</button>
</div>

<div class="items" *ngFor="let todo of todoList">
  <div >
    <input type="checkbox" [(ngModel)]="todo.completed" (change)="updateCompleted(todo.id)">

    <div *ngIf="!todo.editing; else editingTodo">{{ todo.content }}</div>

    <ng-template #editingTodo>
      <input #editVal type="text" value={{updatedItem}} [(ngModel)]="todo.content" >
      <button (click)="onEdit(todo.id,editVal.value)">Save</button>
      <button (click)="toggleEdit(todo.id)">Cancel</button>
    </ng-template>

  </div>

  <div class="remove-item">
    <button (click)="removeTodo(todo.id)">Remove</button>
    <button (click)="toggleEdit(todo.id)">Edit</button>
  </div>
</div>

这是我的打字稿文件，具有以下逻辑：

export class ToDoListComponent implements OnInit{
  @Input()
  todo: Todo;

  toDoItem: string;
  updatedItem: string;
  todoList: Todo[];
  show = false;

  constructor(private todoService: ToDoService) {
    this.toDoItem = '';
    this.updatedItem = '';
  }

  ngOnInit() {
    this.todoList = this.todoService.getTodos();
  }

  addToDo() {
    this.todoService.addTodo(this.toDoItem);
    this.toDoItem = '';
  }

  removeTodo(id: number) {
    this.todoService.removeTodo(id);
  }

  updateCompleted(id: number) {
    this.todoService.updateComplete(id);
  }

  toggleEdit(id: number) {
    this.todoService.toggleEdit(id);
  }

  onEdit(id: number,newContent: string) {
    this.todoService.editTodo(id,newContent);
    this.todoService.toggleEdit(id);
  }
}

解决方法

基本错误是组件未维护状态，而是todoService处于状态。

所以错误：ToDoListComponent todoList内部仅在ngOnInit生命周期钩子上初始化了一次。

解决方案：在将值推入todoService之后，在addToDo方法中，再次在下面的行中调用

this.todoList = this.todoService.getTodos();  

应该执行相同的更新和删除操作，以查看对这些操作反映的更改。