Angular服务删除数据后组件仅首次重渲染，后续无响应的原因

你的问题核心在于组件没有感知到服务中待办数组的变化：即便数组内容或引用更新，组件也不会主动同步最新数据。首次删除有效是因为点击事件触发了Angular的变更检测周期，但后续操作时，变更检测未触发或组件未更新数据引用，导致视图不刷新。

具体问题点 #

1. 服务中的todoList是普通数组，组件仅在初始化时获取一次引用，后续无论用splice修改原数组还是filter生成新数组，组件都不会主动重新获取最新数据。
2. 即便你改用filter重新赋值数组，组件没有重新调用getAllTodos()获取新引用，视图自然不会更新。

修复方案：用可观察对象（BehaviorSubject）让组件订阅数据变化 #

Angular中推荐用可观察对象管理服务状态，这样组件能自动感知数据变化并更新视图。

1. 修改todos.services.ts

import { Injectable } from '@angular/core';
import { TodoItem } from '../interfaces/todo-item';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TodosService {
  // 用BehaviorSubject存储数组，初始值为默认待办列表
  private todoList$ = new BehaviorSubject<TodoItem[]>([
    {
      id: 1,
      title: 'Купить хлеба',
      description: 'Сходить и купить немного хлеба, а то жена заклевала уже.',
      isComplete: true,
    },
    {
      id: 2,
      title: 'Купить селедки',
      description: 'Сходить и купить селедочку, а то закусывать надо.',
      isComplete: false,
    },
    {
      id: 3,
      title: 'Купить пива',
      description: 'Просто купить холодненького и освежающего.',
      isComplete: false,
    },
    {
      id: 4,
      title: 'Связать носки',
      description: 'Да, надо готовиться к зиме.',
      isComplete: false,
    },
    {
      id: 5,
      title: 'Погладить кота',
      description: 'Ну а почему бы и нет?!.',
      isComplete: false,
    },
    {
      id: 6,
      title: 'Засунуть руку в унитаз',
      description: 'Зачем и нет?!.',
      isComplete: false,
    },
  ]);

  // 暴露公共的Observable供组件订阅
  public todos$: Observable<TodoItem[]> = this.todoList$.asObservable();

  constructor() {
    // 若需从localStorage加载，更新BehaviorSubject的值
    // const savedList = JSON.parse(localStorage.getItem('todoList') || '[]');
    // if (savedList.length) {
    //   this.todoList$.next(savedList);
    // }
  }

  getAllTodos(): Observable<TodoItem[]> {
    return this.todos$;
  }

  deleteTodo(id: number): void {
    // 获取当前数组，过滤目标项后更新BehaviorSubject
    const updatedList = this.todoList$.value.filter(todo => todo.id !== id);
    this.todoList$.next(updatedList);
  }

  completeTodo(id: number): void {
    const updatedList = this.todoList$.value.map(todo => {
      if (todo.id === id) {
        // 返回新对象，避免修改原对象引用
        return { ...todo, isComplete: !todo.isComplete };
      }
      return todo;
    });
    this.todoList$.next(updatedList);
  }

  createTodo(todo: TodoItem): void {
    const updatedList = [...this.todoList$.value, todo];
    this.todoList$.next(updatedList);
  }

  updateTodo(id: number): void {
    // 实现更新逻辑时，同样要生成新数组并调用next
  }
}

2. 修改渲染待办列表的父组件

假设父组件是TodoListComponent，需要订阅服务的todos$并通过async pipe自动处理订阅：

import { Component, inject } from '@angular/core';
import { TodosService } from './services/todos.service';
import { TodoItemComponent } from './todo-item/todo-item.component';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  imports: [TodoItemComponent, AsyncPipe],
  template: `
    <ul>
      <app-todo-item 
        *ngFor="let todo of todos$ | async" 
        [todoItem]="todo"
      ></app-todo-item>
    </ul>
  `
})
export class TodoListComponent {
  todosService = inject(TodosService);
  todos$ = this.todosService.todos$;
}

修复原理 #

• BehaviorSubject会保存当前最新值，订阅时立即推送当前值，后续数据更新时自动通知所有订阅者。
• async pipe自动订阅Observable，数据变化时触发组件重渲染，组件销毁时自动取消订阅，避免内存泄漏。
• 所有数组修改操作都生成新数组并调用next()，确保引用变化，Angular能准确检测到数据更新。

内容的提问来源于stack exchange，提问作者Fedor Karasev