Angular中的代码如何执行？

Question

I feel like I have zero understanding of how code is executed in Angular. I have this basic example, where I create an empty array. In a constructor, I print the array and then I call a method, inside of which I print the array again, then I have a loop and I put 5 objects in that array and I print it again. How come that all the printouts are arrays with data? Could someone explain me the how is this happening? Also some link to relevant documentation or deeper explanation would be great, I couldnt find much in Angular docs.

console

stackblitz (look at the console)

properties: Property[] = [];
constructor() {
    console.log("Before", this.properties);
    this.getProperties();
}

getProperties() {
    console.log("Before1", this.properties);
     for (var i = 0; i < 5; i++) {
         this.properties[i] = new Property({
             key: "test" + i,
             label: i + "d",
             value: i + "d",
             required: true,
             order: i + 1
         });
     }
    console.log("After1", this.properties.sort((a, b) => a.order - b.order));
}

Answer 1

To follow code execution, you either add a

debugger;

command in your code (that's like a hard-coded breakpoint)

Or you can open your dev tools and the desired file (eg on your question):

and click on line numbers to add breakpoints manually:

In JS files, you can select some code and use the contextual menu:

You can either evaluate its value at a given time, or put in into the watches (on the right):

Which will then track its value throughout your code.

Answer 2

While debugging you will see the correct value

When you open the object to check the value the chrome console takes the lastest value and shows it. So that's why your all comsole.log holds the same value

Try this

console.log(JSON.stringify(this.properties));