How can I change a data parameter in Angular 2?

angular route data
angular 7 get url parameters
router-outlet in angular
angular change route param without reload
angular/router
routerlink angular
angular url parameters
angular update route params

I have a problem changing a data parameter in my component file:

this.commandList.ListesCommandesATransmettre.forEach(data => {
    this.catalogs.forEach(catalog => {
        if (catalog.Libelle === data.Catalogue) {
            if (catalog.selected === false) {
                console.log(data.isSelected)
                data.isSelected = false;
                console.log(data.isSelected)
                console.log(data);
            }
        }
    })
});

This code displays:

true false

But the value of isSelected in console.log(data) is still true. So, why is the result false?

Try this if it's a loop problem with the callback

for (let data of this.commandList.ListesCommandesATransmettre) {
  for (let catalog of this.catalogs) {
    if (catalog.Libelle === data.Catalogue) {
      if (catalog.selected === false) {
        console.log(data.isSelected)
        data.isSelected = false;
        console.log(data.isSelected)
        console.log(data);
      }
    }
  }
}

Reloading Components when change in Route Params, Angular does not allow to reload the component the when the parameter in the component works fine but when the id changes ( /user/2 )angular just updates  Angular can detect when component data changes, and then automatically re-render the view to reflect that change. But how can it do so after such a low-level event like the click of a button, that can happen anywhere on the page?

I cant understand logic of your code. What happen if this.catalogs has many catalogs that meet the condition? isSelected will be setted many times in false.

Maybe this works (if I understand your logic):

this.commandList.ListesCommandesATransmettre = this.commandList.ListesCommandesATransmettre.map(data => {
    const mutateData = Object.assign({}, data);

    // If condition math, then isSelected set in false. Else, isSelected keep the his value
    mutateData.isSelected = 
        this.catalogs.some(catalog => catalog.Libelle === data.Catalogue && !catalog.selected) ? false : mutateData.isSelected;

    return mutateData;
})

In-app navigation with routing, Next, update your component template to include <router-outlet> . Update the ngOnInit() method to access the ActivatedRoute and track the id parameter:. You have some data you get from external source (e.g. by calling API). You want to display it on screen. However, instead of displaying it on the same component, you would like to pass the data to a child component to display. The child component might has some logic to pre-process the data before showing on screen.

Try this code to test if it is updating correctly. the loop will tell which are true/false and you can see if that is the case in the updated data.

this.commandList.ListesCommandesATransmettre.forEach((data, index) => {
    this.catalogs.forEach(catalog => {
        if (catalog.Libelle === data.Catalogue) {
            if (catalog.selected === false) {
                data.isSelected = false;
            }
            console.log(index + 'is selected: ' + data.isSelected)
        }
    })
});
console.log(this.commandlist);

Something I have noticed is that web browsers will only keep the the 'most current' reference of an object in memory. So after a loop has ended, the 'most current' reference is the last one to fire. So you may be looking at your last object and not the one you are trying to test. If someone else knows more, or has a reference to what is actually happening, please edit this post.

Using Route Parameters, Note :id in the path of the product-details route, which places the parameter in In this case the parameter may change without the component being recreated. Now with all this in place we can now finally start passing parameters to our app, on your AppComponent import the Router, ActivatedRoute and the Params from @angular/router so your AppComponent will look something like this:

Angular 2: Passing Data to Routes, 2. Parse the URLs and replace the parameter names with actual values where specified. 3. Build the actual <a href=””> tags that the  Even though the question specifies version beta 7, this question also comes up as top search result on Google for common phrases like angular 2 query parameters. For that reason here's an answer for the newest router (currently in alpha.7). The way the params are read has changed dramatically.

Subscribe to angular route parameter changes, Text version of the video http://csharp-video-tutorials.blogspot.com/2018/04/​subscribe-to Duration: 9:48 Posted: Apr 16, 2018 /product/2. Where the second URL segment ( 1 and 2 ) being the id of the product. The id is dynamic and changes as per the selected Product. To handle such scenario angular router allows us to include route parameters, where we can send any dynamic value for a URL segment. How to Pass parameters to Angular Route Defining the Route

Params, David Aden discusses Angular 2 components, looking at how they're The decorator can also set various configuration parameters for the component. table component that the data for a row has changed so the change  This page will walk through Angular 2 Http get () parameters + Headers + URLSearchParams + RequestOptions example. Angular Headers class is used to create headers. Angular URLSearchParams class is used to create URL parameters. Angular RequestOptions instantiates itself using instances of Headers, URLSearchParams and other request options such

Comments
  • Can you provide an example of the variable this.commandList and this.catalogs? please
  • I think it's because you have 2 foreach loops. So the console is displaying the latest data that it had. try doing console.log(JSON.stringify(data));. or doing a console.log(this.commandList); outside of your loops
  • rhavelka : I have isSelected = false inside console.log(JSON.stringify(data));
  • I reproduce something similar on Stackblitz and it works angular-yfgsay.stackblitz.io