My app uses a facade service (singleton injectable) with signals for state management and RxJS for API calls.
I'm experiencing an inconsistent UI update problem with a table after a successful create or delete action.
1. I create an element to add to the table
2. The API call chain succeeds (HTTP 200 OK for both the POST and the subsequent GET/Re-Fetch).
3. The signal update line and the forced refresh line both run successfully
4. The user receives the success toast notification
5. Problem -> Here the table should update but it doesn't
// Signals used for reactivity
readonly timestamp = signal<number>(Date.now());
readonly userCredentials = signal<Bpa.BaseCredentialVm[]>([]);
refreshCredentialsTable() {
this.timestamp.set(Date.now());
}
// The core action helper that fails to refresh the view consistently
private credentialAction = <T>(apiCall: Observable<T>, messageKey: string) => {
apiCall
.pipe(
// 1. CRUD operation succeeds
switchMap(() => {
const userId = this.requiredUserId();
// 2. Re-fetch the entire list
return this.api.credentialsFindByUserId(userId);
}),
tap((result) => {
// 3. Update the data signal
this.userCredentials.set(result.items || []);
// 4. Force global change detection to stabilize the view
this.applicationRef.tick();
// 5. Trigger the table refresh input
this.refreshCredentialsTable();
}),
finalize(() => this.loading.set(false))
)
.subscribe();
};
Given that the data signal (userCredentials) is updated and the trigger signal (timestamp) is set synchronously within the successful RxJS chain, why is the custom table failing to register the change and re-render?
