Tips for updating the returned parameter from a function in Angular

I am currently facing an issue with the DevExtreme datasource and have already reached out to their support team for assistance. However, I can't help but wonder if I might be overlooking something simple in Angular.

DevExtreme offers an AspNetData source control that streamlines communication with .NET APIs. It allows you to define additional parameters through an Options object. In my particular case, I have set up a "firmaId" loadParams that retrieves its value from a function.

The function "getFirmaId()" merely returns the value of the "firmaId" variable. The selectTab(e) function is triggered when a tab controller is clicked, updating the "firmaId" successfully. However, when I attempt to load the DataSource using the DevExtreme client API, the loadParams of "firmaId" always shows as 0. Is this behavior expected? To me, it seems to contradict the principles of functional programming in JavaScript.

Any assistance on this matter would be greatly appreciated.

firmaId: number;  

constructor(private dataService: DataService) {  

    this.firmaId = 0;

    this.dataSource = AspNetData.createStore({  
      key: "id",  
      loadUrl: Constants.apiRoot + "/api/cari/get",  
      insertUrl: Constants.apiRoot + "/api/cari",  
      updateUrl: Constants.apiRoot + "/api/cari",  
      deleteUrl: Constants.apiRoot + "/api/cari",  
      loadParams:  { firmaId : this.getFirmaId() },  
      onBeforeSend: function(method, ajaxOptions) {  
          ajaxOptions.xhrFields = { withCredentials: true };  
      }  
    });  
  }  

  getFirmaId():number{  
    return this.firmaId;  
  }  

  selectTab(e) {  

    this.firmaId = e.itemData.id;  
    this.dataSource.load();  

  }

Answer №1

Allow me to walk you through the current situation. The constructor triggers and a store is created, with this.getFirmId() being called, resulting in a return value of 0 at this stage. When a tab is selected, this.firmId is appropriately updated, and the data source is loaded.

Your issue lies in the fact that it's unlikely that createStore is being executed again when this.dataSource.load() is called. As a result, this.getFirmId() isn't being invoked to update the value. You can verify this by logging within the getFirmId function to check if it's being triggered. If not, you'll have to find a way to update the dataSource before triggering load once more.

selectTab(e) {  
  this.firmaId = e.itemData.id;
  // update param here 
  this.dataSource.load();  
}

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

Unlocking Specific URLs in Angular for Data Retrieval

I need assistance setting up a referral system for my angular website. Currently, my website is a single component accessible at localhost:4200. I would like to allow users to enter referral codes when accessing the site, such as 'localhost:4200/r/h7G ...

Is it possible for Angular 2 to overlook a 404 error when using Http.get

My task involves utilizing the HTTP library to verify the presence of a file on the server. The process seems straightforward, as I am executing the following code: private serverHeadRequest(): Observable<any> { return this.http.head("theFil ...

Verify an entry with exactly 7 numerical digits

When inputting data, the user is limited to entering only 7 figures. If more than 7 figures are entered, an error message will display: "You need 7 digits". For instance, if the user enters something like this: 12345678910 The error message is correctly ...

(Angular) Best methods to search for a specific string in an array

Looking to retrieve a string value from an HTML input inside an array in Angular 5 using a service file within a component. My code login.component.ts export class LoginComponent implements OnInit { userData = []; constructor(private router: Route ...

Redirect to the homepage if the requested page is not found in IIS

Within my IIS Website, there are three applications being hosted. The main website is an Angular App, alongside an API application housing all APIs and another application that is a pure javascript project hosted under the application alias /vmenu/. Any r ...

I need assistance in deactivating all functions activated by @typescript-eslint/ban-types

I am constantly battling with the "@typescript-eslint/ban-types" rule. It plagues me with countless errors in the hundreds on my large project, making it a nightmare to manage and resolve. Despite having the following configuration in place, eslint seems ...

Issue: npm encountered an error due to writing after reaching the end

I've encountered a problem while trying to install Cordova and Ionic. Due to what appears to be a corrupted installation, I had to uninstall NodeJS - Cordova - Ionic. After re-installing NodeJS successfully, the trouble began when running the pop ...

[Simple TypeScript]: Assign the parameter value as the key of the object returned by the function

How do I modify the key of a function returned object to match its parameter's value? Here is my current code: const createCache = <A, T extends string>(name: T, base = {}) => { const cache = base; return { [name]: cache, } as { ...

Jest encountering errors when compiling a generic function

I'm able to successfully run my Node app, but running tests on a class with Generics is causing an error. The test code looks like this: import { Request, Response } from 'express'; import { JsonWebTokenError } from 'jsonwebtoken' ...

Hovering over the Star Rating component will cause all previous stars to be filled

I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right. Basically, if I have ...

Design your own Angular 2 Directive for effortless element dragging!

My goal is to develop a custom directive in Angular 2 that enables the user to drag an HTML Element based on its x position. I have drafted some pseudo code to demonstrate what I think might work, however, my experience with directives is limited and I ...

The module 'json-stringify-safe' could not be located

Encountering an issue while executing the command - ionic serve The code was functioning properly on a different system but seems to be causing trouble for me at the moment. https://i.sstatic.net/X1JG0.png ...

What is the best way to incorporate the useSearchParams hook into props or function arguments?

When I utilize the useSearchParams hook in my component, I encounter an issue where I am unable to type parameters when passing the hook to props or function arguments. import { useSearchParams } from 'react-router-dom'; const urlSearchParamState ...

Navigating between primary and named routes in Angular using RouterLink

After struggling for a while, I finally managed to get this code working: this.router.navigateByUrl('/live-chat(subnav:subnav)'); However, I am facing difficulty in replicating the same behavior using a [routerLink]='' directive. The m ...

Angular 10 Reactive Form - Controlling character limit in user input field

I'm currently developing an Angular 10 reactive form and I am looking for a way to restrict the maximum number of characters that a user can input into a specific field. Using the maxLength Validator doesn't prevent users from entering more chara ...

Using aliased imports is no longer an option when setting up a new TypeScript React application

Upon creating a new React-typescript app using the following command with <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3143545052457100061f011f03">[email protected]</a> and <a href="/cdn-cgi/l/email-protectio ...

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

In Angular 2, transferring data from a parent route to a child route

I have set up a route named "home" with three child routes: documents, mail, and trash. Within the home route component, there is a variable called 'user'. While I am familiar with various methods of passing information between parent and child c ...

Issue encountered: The differ cannot recognize the provided object '[object Object]', which is of type 'object'. NgFor is limited to binding Iterables only

I have been following a tutorial on Ionic created by Paul Halliday, focusing on a shopping list project that utilizes Firebase and Angular. However, I am encountering an error every time I try to run the application: Error: Uncaught (in promise): Error: ...

Angular 4 Bootstrap 4 Collapsible Navigation Bar

Struggling for a while now trying to achieve the exact functionality I desire. Within my Angular Universal App, there is a vertical navigation bar at the top that I want to make responsive for mobile devices. I am utilizing Bootstrap 4 Alpha 6 and ngx-boot ...