Array has been updated, but the view is not reflecting the changes

At first, the user collection is represented by Model:1

  {
    "_id":"sodjflkadkjj2342",
    "role:["customer"],
    "active":true,
    "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15767d677c66557477763b767a78">[email protected]</a>",
    "password":"$2a$10$RsemeECS8vCEav/CPgO75ucr5C2e3ybplnMShchlDKn6naUcEI0uW",
    "pwd_token":1502,
    "phone":1234567890
    }

It has been updated and now referred to as Model 1.1

 {
    "_id":"sodjflkadkjj2342",
    "role:["customer","employee"],
    "active":true,
    "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17747f657e64577675743974787a">[email protected]</a>",
    "password":"$2a$10$RsemeECS8vCEav/CPgO75ucr5C2e3ybplnMShchlDKn6naUcEI0uW",
    "pwd_token":1502,
    "phone":1234567890
    }

The details can be retrieved via Postman using an API, but only Model 1 is returned as a response from the client

Client

  getUserDetails(token): Observable<any> {
    return this.http.get(environment.apiBase+'/api/user/get',{
      headers: {
        Authotization: token
      }
    });
  };

TS

  getUsers() {
    this.userService.getUserDetails(this.token).subscribe(
        data =>{this.users = data,
         console.log(this.users);
      },
      error => console.log(error),
    );
  }

Answer №1

In Angular, the framework utilizes zone.js to monitor changes within a Single Page Application. Therefore, if you make modifications to data from your Angular application and those changes are reflected in the database, there may be an issue where you are not invoking getUsers() function (you need to call it again) to update your local data structure such as an Array or any other data source you have utilized. If this doesn't resolve the problem, please provide additional code for further assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS3D object stands out among 3D objects, maintaining its visibility even as the scene is rotated

I'm utilizing the CSS3DRenderer to render HTML on FBX 3D objects. Everything seems to be working well, except that when I rotate my scene, the HTML becomes visible through the 3D objects as if they were transparent. I am relatively new to Three.js and ...

How to change Input settings in Angular 6?

I'm looking to toggle between options in a select field and display another input depending on my selection. Ownership: <select ngModel="selectedValue"> <option value="true">Owned</option> <option value="false">Not Owned< ...

When using PyMongo's find_one method, it may not retrieve a specific entry that

Encountering a peculiar issue with Pymongo's find_one function. On my local machine, I have a database named "cluster_db" with a collection called 'clusters'. Upon executing the query in the mongo shell, the output looks like this: > db ...

Tips for effectively managing components during navigation within dynamically loaded components

Our interface includes 3 main navigations for tab views: tab1, tab2, and tab3. Additionally, there is a navigation from the side menu. Each tab dynamically loads components, allowing seamless navigation between different parts of the application. When sw ...

Issues with form validation in Angular reactive forms are causing problems

I recently created a complex reactive form by following the guidelines from this source on how to handle validation in Angular 9. After posting my code in StackBlitz, I ended up with three links: EDITOR URL APP URL EMBED URL If these links are not worki ...

Transform the code provided by bundleMDX into an HTML string specifically for RSS, all the while utilizing the mdx-bundler

I am currently working on developing an RSS reader and I need to convert the code returned by bundleMDX into a string. This is necessary so that I can utilize it with ReactDOMServer.renderToStaticMarkup(mdx) in my project. You can find a similar implement ...

I'm unable to utilize the PATCH method in Pug, Mongoose, and Express.js

As a beginner in coding, I want to apologize in advance for any mistakes I may make. Currently, I am attempting to update the color of an existing object stored in MongoDB using the PATCH method in the browser. Strangely, it's not working even though ...

Unable to retrieve a property from a variable with various data types

In my implementation, I have created a versatile type that can be either of another type or an interface, allowing me to utilize it in functions. type Value = string | number interface IUser { name: string, id: string } export type IGlobalUser = Value | IU ...

Are there any means to automatically generate placeholder methods and properties for constructor dependencies in Angular?

constructor(private a:dependencyA,private b:dependencyB,private c:dependencyC){ } Here is an example of how dependencyA is structured: export class dependencyA { showPopup: boolean; defaultProperties = { showPopup: this.showPopup, }; priva ...

What is the best way to retrieve specific values from an ng-bootstrap modal?

I am working on a website that includes an ng-bootstrap modal. This modal contains two <select> elements with dynamic items, allowing the user to click on two buttons. One button simply closes the modal and sets the value of the Reactive Form to new ...

Is it possible for object destructuring in Javascript to include dynamic non-rest keys using ...rest?

Suppose we have an object: const obj = { key1: "value1", key2: "value2", key3: "value3", key4: "value4" }; My goal is to filter out specific keys from this object to create a smaller one. I am aware of the following ...

Error Handling in Angular2 MVC 4 Project Route Issues

Here is the structure of my Mvc 4 Project with angular 2 implemented: Solution 'Angular2Starter' |-- angular2Starter | `-- Controllers | `-- HomeController.cs |-- src | |-- app | | |-- home | | | |-- home.component.ts | ...

Organize an array of objects into a custom tree structure with the data arranged in reverse

I have an array of objects structured as key value pairs with children forming a tree. For a clearer understanding, please see the attached screenshot. Despite trying various methods, I have been unable to achieve the desired result shown in the image. ...

Exploring subclasses in TypeScript

When working with TypeScript and defining an interface like the one below: export interface IMyInterface { category: "Primary" | "Secondary" | "Tertiary", } Can we access the specific "sub types" of the category, such as ...

The library's service under NG6 is not currently defined

Currently, I am in need of assistance, pointers, or guidance in debugging and understanding an issue with a derived class that extends a service provided by a library in an Angular 6 project. I am working on migrating an existing Angular 5.x project to th ...

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

Problem with MongoDB - increasing number of connections

I have encountered an issue with my current approach to connecting to MongoDB. The method I am using is outlined below: import { Db, MongoClient } from "mongodb"; let cachedConnection: { client: MongoClient; db: Db } | null = null; export asyn ...

Having trouble with Angular 2 when submitting a form

Whenever I try to submit a form with two input fields and one select list, the submitted value for the select list is always 0. I am unsure where I am making a mistake. When I post this form to an API, all values are correct except for the select list valu ...

Transforming "larger" items into "smaller" items using Typescript

I am experiencing challenges when trying to assign larger objects into smaller ones. To illustrate this issue, I will provide a simple example: Let's say I have defined the Typescript interface: export interface CrewMember { name: string; orga ...

constantly changing content powered by node.js

I am in the process of developing a small music quiz using node.js 0.4.12 and the express framework. Currently, my express setup is very basic and only serves the base URL. app.get('/', function(req, res){ res.render('index.jade'); }) ...