I am in the process of developing a multi select filter using RxJs and an angular service to exchange values between various components.
@Injectable({
providedIn: 'root'
})
export class SomeService{
private readonly defaulFilterSelect: SomeSelect[] =
[
{
id: 1,
label: 'label 1',
options: [
{ id: 2, isChecked: false},
{ id: 3, isChecked: false}
]
},
{
id: 7,
label: 'Label 2',
type: { name: 'checkbox' },
options: [
{ id: 4, isChecked: false},
{ id: 5, isChecked: false}
]
}
]
private filterSelectDataSource = new BehaviorSubject<SomeSelect[]>(this.defaulFilterSelect);
filterSelectData$ = this.filterSelectDataSource.asObservable();
public get getFilterSelectData(){
return this.filterSelectDataSource.value;
}
}
Now, here's the thing. As users interact with the application, they may change the property isChecked within the SomeSelect class to true, but then have the option to revert back to the initial state where all properties named "isChecked" are set to false.
To achieve this, I had the idea that if I needed my observable to reset to its initial state, I could simply use the next() method with the default value defaulFilterSelect.
uncheckAllOptions(){
this.filterSelectDataSource.next(this.defaulFilterSelect); //here
}
However, it seems that this approach is not producing the expected results. When I log the values in a subscribe function, I still see the previous value of my observable. Moreover, if I make changes directly to the object
this.filterSelectDataSource.valuenext(obj), the UI picks up on these changes and reflects them, which is puzzling to me. I would expect that only by calling this.filterSelectDataSource.next(someNewObject);Can anyone provide insights into the correct direction to resolve this issue? Thank you!