Angular 2教程 - 对绑定的误解

Question

The question is at the end.

I'm learning Angular (angular 2). I know already Angular 1.5.

I'm doing the official tutorial of angular and I don't understand one point at the chapter 3.Master/Detail.

Here is the live example

CODE1

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

When we click on the hero, we lunch the function onSelect(hero)

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

Then, the following code appears.

CODE2

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
</div>

My question: When I change the value of the input with the [(ngModel)] , the text of the CODE1 change. Why? Because I have tried with a similar code with angular 1.5 and the text of CODE1 doesn't update.

I want to change with the input, the text of {{selectedHero.name}} and not {{hero.name}}

• SelectedHero is equal to hero but not the opposite isn't, is it?
• How to give selectedHero the value of hero with onSelect() and not to affect hero when i update selectedHero with the input (but change of course {{selectedHero.name}} )?

EDIT: Because of the Misunderstanding of my question, I try to reformulate:

When I change the value in the input [(ngModel)]="selectedHero.name", I want to change the value of {{selectedHero.name}} but not to change the value of {{hero.name}}. How can I succeed that? Thank you.

EDIT 2 QT Ray gives the Answer in comments.

We have to copy hero to succeed.

We need to replace

this.selectedHero = hero;

by

this.selectedHero = Object.assign({}, hero);

or with deep copy (with lodash)

this.selectedHero = _.cloneDeep(hero)

Answer 1

SelectedHero is equal to hero but not the opposite isn't, is it?

In that situation, yes. SelectedHero and hero are the same. SelectedHero doesn't exist without selecting a hero.

When your code is loaded, selectedHero is probably something like:

public selectedHero: IHero

And in your constructor, you may have

this.selectedHero = null

selectedHero is not defined until you click a hero and then they become the same thing.

You could select another hero and then that Hero becomes the selectedHero.

How to give selectedHero the value of hero with onSelect() and not to affect hero when i update selectedHero with the input (but change of course {{selectedHero.name}})?

You would need to get rid of the () around the ngModel. So it should say [ngModel]. The () binds the ngModel directive to the event. The [] lets the element know that it's an attribute. The click is fine, you will still pass that information to the element.

Answer 2

Excerpt from here: https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html

If you have a one-way binding to ngModel with [] syntax, changing the value of the domain model in the component class will set the value in the view. If you have a two-way binding with [()] syntax (also known as 'banana-box syntax'), the value in the UI will always be synced back to the domain model in your class as well.`

You are using two way binding which is why the hero you selected in CODE1 changes.

I hope this helps.