RXJS устраняет дребезг и модифицирует BehaviourSubject

я не уверен в том, что вы хотите улучшить до сих пор.

Я создал это приложение, чтобы показать вам, как я управляю такого рода операциями.

В этом приложении я не использовал ReactiveFormModule из Angular, который может легко абстрагировать эту часть:

const inputElement = document.getElementById('input') as HTMLInputElement;
const onChange$ = fromEvent(
  inputElement, // In keyup from input field.
  'keyup'
).pipe(
  debounceTime(1000), // Delay the user input
  map(() => inputElement.value) // Transform KeyboardEvent to input value string.
);

Делая что-то вроде этого

   <input
       type = "text" 
       name = "title"
       [formControl] = "title"
   >

export class FooComponent implement OnInit {
    title: FormControl = new FormControl();
    ngOnInit() {
      this.title.valueChanges.pipe(debounceTime(1000)).subscribe(title => {
        // Do something with your debounced data.
      })
    }
}

Тогда вы можете следовать этой логике:

export class TodoService {
  private _todos$: BehaviorSubject<Todo[]>;
  private _todos: Todo[];

  constructor() {
      this._todos = (this.hasLocalStorage())?this.getLocalStorage():[];
      this._todos$ = new BehaviorSubject(this._todos);
  }

  add(todo: Todo) {
    this._todos.push(todo);
    this.refresh();
  }

  edit(id: number, title: string) {
    // Find by id and copy current todo.
    const todo = {
      ...this._todos.find(todo => todo.id === id)
    };
    // Update title
    todo.title = title;
    // Update todos reference
    this._todos = [
      // Find any other todos.
      ...this._todos.filter(todo => todo.id !== id),
      todo
    ];
    this.refresh();
  }

  get todos$(): Observable<Todo[]> {
    return this._todos$.asObservable();
  }
  private refresh() {
    this._todos$.next([...this._todos]);
    localStorage.setItem('todos', JSON.stringify(this._todos));
  }

  private hasLocalStorage(): boolean {
      return (localStorage.getItem('todos') !== null);
  }

  private getLocalStorage(): Todo[] {
    return JSON.parse(localStorage.getItem('todos'));
  }
}

1/Здесь у меня есть 2 свойства: один — мой магазин, где я буду хранить ссылки на все мои задачи, второй — мой BehaviorSubject, который используется для уведомления остальной части моего приложения при обновлении моего магазина.

2/В моем конструкторе я инициализирую оба атрибута пустым массивом или данными localStorage (если они есть).

3/ У меня есть метод refresh, который делает 2 вещи, обновляет оба моих свойства.

4/ При операции добавления/редактирования/удаления я выполняю ее как обычную операцию с массивом, затем вызываю «обновить».

вуаля

живое кодирование