TypeScript 中的变量链接是如何工作的？

Question

I am new at Angular and now I am currently being stucked, because I can not understand why it works like that. Here is my code ⬇️

🪧 Explonation of whole functionality: I have a mock list of heroes in another file (mock.heroes.ts), where the whole list is set like const value, what means you can not change it anymore. Everything works well, also it's understandable for me, till you select, by clicking on exact hero, your selectedHero . The div is now visible, and you can change its name in the input field below.

❓ I can not understand, why when I change something inthe input with the id="hero-name", the change occurs not only on selectedHero.name but also on hero.name (in the ul with class="heroes").

❓ Is this.selectedHero like link to real hero , or how does this binding works in TS? At first I thought, selectedHero was a copy of a hero . That's why I am asking, because it does not make sence for me.

❓ Why even after the list is set to be const value, you can change the names of the heroes init?

___.component.html

<ul class="heroes">
  <li 
    *ngFor="let hero of heroes" 
    (click)="onSelect(hero)" 
    [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name | uppercase}} Details</h2>

    <div><span>id: </span>{{selectedHero.id}}</div>

    <div>
      <label for="hero-name">Hero name: </label>
      <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
    </div>
</div>

___.component.ts

import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  heroes = HEROES;
  selectedHero?: Hero;

  constructor() { }

  ngOnInit(): void {
  }

  onSelect(hero: Hero) {
    this.selectedHero = hero;
  }
}

mock.heroes.ts

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Dr Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

Answer 1

• I can not understand, why when I change something inthe input with the id="hero-name", the change occurs not only on selectedHero.name but also on hero.name (in the ul with class="heroes")

Angular runs checks every now and then to look for updates on your models. If a change is detected, the view is updated, this is why your content changes elsewhere.

• Is this.selectedHero like link to real hero, or how does this binding works in TS? At first I thought, selectedHero was a copy of a hero. That's why I am asking, because it does not make sence for me.

It's the same object, they share the same address. If you want to deepcopy your object, call JSON.parse(JSON.stringify(myJSONobject))

• Why even after the list is set to be const value, you can change the names of the heroes init

What const keyword does is protect your variable from changing it's address. Let's say you have an array at address A having multiple objects in it. Each an every object has it's own address (B, C, D, ...). So as long as you don't reasign that const variable you are good to go. nothing hold you from changing the inner content of this array. Reassign it is what wouldn't work using the const keyword.

Answer 2

It is the so called two way binding underneath. You change that object by entering a name. Because that object has changed, that triggers the rerendering of that one object in the ul and you got the magic happened 😉. Read here: https://angular.io/guide/two-way-binding