Currently, I am experimenting with some new ideas in a project and encountered an error message as mentioned in the title.
To begin with, I have a BehaviorSubject array where all my items are stored:
todos$ = new BehaviorSubject<TodoInterface[]>([]);
addTodo(text: string): void {
const newTodo: TodoInterface = {
id: Math.random().toString(16),
text: text,
isCompleted: false,
};
const updateTodos = [...this.todos$.getValue(), newTodo];
this.todos$.next(updateTodos);
}
This code snippet was originally shown by an instructor on Youtube who used the getValue() method of BehaviorSubject which is not recommended for regular usage. Therefore, to make a revision, I decided to amend a section of the code from this:
removeTodo(id: string): void {
const updatedTodos = this.todos$.getValue().filter((todo) => todo.id !== id);
this.todos$.next(updatedTodos);
}
To something like this:
removeTodo(id: string): void {
const updatedTodos = this.todos$.pipe(
map((todos) => todos.filter((todo) => todo.id !== id))
);
this.todos$.next(updatedTodos);
}
My intent was simple: filter out the necessary items using a pipe and then push the remaining items back into the original array. However, this approach did not yield the desired results and I encountered the aforementioned error message. Can anyone point out what I might have overlooked here?
I suspected that the issue could be due to not subscribing to this stream but I am unsure about where to subscribe if not directly after the pipe function. Below is the component part for reference (if relevant at all):
removeTodo(): void {
this.todosService.removeTodo(this.todoProps.id);
}