Issues with Angular not reflecting data changes in the view after updates have occurred

Question

Issues with Angular not reflecting data changes in the view after updates have occurred

I have a setup with two components. One is responsible for creating new data entries, while the other one is in charge of listing all the data stored in a database. The issue I'm facing is that even though the creation component successfully adds new data to the database, the lister component fails to update its view to display the newly added entry. It's strange because the data is indeed updated and retrieved from the database, but it's not reflecting in the lister component’s view. Here's an excerpt of the code for better understanding:

The "Maker"

 // Code for the Maker component

The "Lister"

 // Code for the Lister component

DB Service

 // Code for the Database service

HTML Lister

 // Code for the HTML template of the Lister component

Although the `refresh()` function works properly and is called by the maker component, the data displayed in the view doesn’t get updated accordingly. Upon further investigation, I suspect there might be two separate instances of the same data: one being shown and another being used by the refresh call triggered by the maker component. Is it possible that `[providers]` are operating on different threads or contexts than the ones they were initialized from?

If anyone has any insights or suggestions on how to resolve this issue, I would greatly appreciate it!

angular typescript angular-services angular-components

Answer 1

Answer №1

The primary responsibility of the Lister module should be to solely handle restaurant data. This creates a clear distinction between smart and dumb components, eliminating unnecessary dependencies.

Parent Module

refresh$ = new Subject(); // clicking a button can trigger refresh$.next() to fetch data again
restaurantData$ = this.getAll();

getAll() {
  return this.refresh$.pipe(
    startWith(<unknown>null),
    switchMap(()=> this.dataService.getAllRestaurants())
  );
}

}

Render restaurantData$ using async in the template

Answer 2

The primary responsibility of the Lister module should be to solely handle restaurant data. This creates a clear distinction between smart and dumb components, eliminating unnecessary dependencies.

Parent Module

refresh$ = new Subject(); // clicking a button can trigger refresh$.next() to fetch data again
restaurantData$ = this.getAll();

getAll() {
  return this.refresh$.pipe(
    startWith(<unknown>null),
    switchMap(()=> this.dataService.getAllRestaurants())
  );
}

}

Render restaurantData$ using async in the template

Issues with Angular not reflecting data changes in the view after updates have occurred

Answer №1

Similar questions

Is there a way to prevent prettier from automatically adding a new line when formatting HTML tags with ">"?

Having difficulty using the Angular 6 "generic type elementref requires 2 type arguments" error message in my code

How to add Bootstrap and Font Awesome to your Angular project

Troubleshooting: Issue with Angular routerlink not functioning in the sidebar section of SB Admin 2 Bootstrap 4 template

What is the best way to inject services into non-service class instances in Angular 2?

Angular, manipulating components through class references instead of creating or destroying them

Attempting to transform calc application into TypeScript, what data type should this function be?

Does Angular2 come with built-in responsiveness?

Verifying Angular (2+?) Compatibility: Opening and Closing Material mat-menu on Hover [GUIDE]

Unable to iterate over property in Angular 6 after receiving response

Encountering build errors with Angular 2 version 2.0.0-beta.9

I am looking to generate an array with key-value pairs from an object that will be seen in the examination

Enhance your React application by using a personalized hook that allows you to trigger a function

Tips for Verifying a User's Identity using Username and Password

How to utilize methods from different pages in Ionic 2

Exploring Deeply Nested Routing in Angular

Formatting PDF exports in Angular using jspdf

Unable to capture Metamask Errors

Directive for Angular 4 Confirmation Popups

Delete one item from a group of objects[]