Angular待办应用调用service删除todo后service数据更新视图未刷新如何解决

你在组件初始化时将service中的todos数组引用赋值给了组件本地的todos变量。执行删除操作时，service中的removeTodo方法使用filter生成了全新的数组，替换了service中原todos的引用，但组件本地的todos仍然指向旧的数组引用，Angular检测不到引用对应数据的变化，因此视图不会更新。

• 方案1：操作后重新拉取数据
  修改组件的addTodos和removeTodo方法，调用service的操作方法后，重新从service获取最新的todos数组，无需修改service代码，实现成本最低：

addTodos(): void {
  const todo: Todo = {
    id: ++this.todoId,
    title: this.todoTitle,
  };
  this.transportationService.addTodo(todo);
  this.todoTitle = '';
  // 新增拉取最新数据逻辑
  this.todos = this.transportationService.getTodos();
}

removeTodo(id: number): void {
  this.transportationService.removeTodo(id);
  // 新增拉取最新数据逻辑
  this.todos = this.transportationService.getTodos();
}

• 方案2：service中原地修改数组
  修改service的removeTodo方法，不生成新数组，直接在原数组上修改、保留原有引用，无需修改组件代码，适合小型项目：

removeTodo(id: number): void {
  const targetIndex = this.todos.findIndex(item => item.id === id);
  if (targetIndex > -1) {
    // splice会直接修改原数组，不会改变数组引用
    this.todos.splice(targetIndex, 1);
  }
  console.log(this.todos);
}

• 方案3：使用RxJS响应式流管理数据（推荐中大型项目使用）
  通过BehaviorSubject封装待办数据，数据变更时自动通知所有订阅的组件，是Angular项目标准的跨组件数据共享实践：
  首先修改service代码：

import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TransportationService {
  // 用BehaviorSubject存储待办数据
  private todosSubject = new BehaviorSubject<Todo[]>([]);
  public todos$ = this.todosSubject.asObservable();

  constructor() {}

  getTodos() {
    // 返回副本避免外部直接修改内部状态
    return [...this.todosSubject.value];
  }

  addTodo(todo: Todo): void {
    const newTodos = [...this.todosSubject.value, todo];
    this.todosSubject.next(newTodos);
  }

  removeTodo(id: number): void {
    const newTodos = this.todosSubject.value.filter((i) => i.id !== id);
    this.todosSubject.next(newTodos);
    console.log(newTodos);
  }
}

再修改组件代码订阅待办数据：

import { Subscription } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy {
  todos: Todo[] = [];
  todoTitle: string = '';
  todoId: number = 0;
  appTitle: string = 'To-Do App';
  private todoSub!: Subscription;

  constructor(private transportationService: TransportationService) {}

  ngOnInit(): void {
    // 订阅待办数据变更，自动更新本地todos
    this.todoSub = this.transportationService.todos$.subscribe(todos => {
      this.todos = todos;
    });
  }

  addTodos(): void {
    const todo: Todo = {
      id: ++this.todoId,
      title: this.todoTitle,
    };
    this.transportationService.addTodo(todo);
    this.todoTitle = '';
  }

  removeTodo(id: number): void {
    this.transportationService.removeTodo(id);
  }

  ngOnDestroy(): void {
    // 取消订阅避免内存泄漏
    this.todoSub?.unsubscribe();
  }
}

内容的提问来源于stack exchange，提问作者Majid Ainizoda