Angular 2 教程 - 对绑定的误解

Question

问题在最后。

我正在学习 Angular（角度 2）。我已经知道 Angular 1.5。

我正在做official tutorial of angular，但我在第 3.Master/Detail 章有一点不明白。

这里是live example

CODE1

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

当我们点击英雄时，我们会使用函数onSelect(hero)

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

然后，出现以下代码。

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>

我的问题： 当我使用 [(ngModel)] 更改输入值时，CODE1 的文本会更改。为什么？因为我尝试过使用 angular 1.5 的类似代码并且 CODE1 的文本没有更新。

我想用输入改变 {{selectedHero.name}} 的文本而不是 {{hero.name}}

• SelectedHero 等于 hero 但不是相反，不是吗？
• 如何使用 onSelect() 为 selectedHero 赋予 hero 的值，而不影响 hero用输入更新 selectedHero（当然要改变 {{selectedHero.name}}）？

编辑：由于对我的问题的误解，我尝试重新表述：

当我更改输入 [(ngModel)]="selectedHero.name" 中的值时，我想更改 {{selectedHero.name}} 的值，但不想更改 {{hero.name} 的值}。我怎样才能成功？谢谢。

EDIT 2 QT Ray 在 cmets 中给出答案。

我们必须复制英雄才能成功。

我们需要更换

this.selectedHero = hero;

通过

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

或使用深拷贝（使用 lodash）

this.selectedHero = _.cloneDeep(hero)

Answer 1

SelectedHero 等于 hero 但不是相反，不是吗？

在那种情况下，是的。 SelectedHero 和 hero 是一样的。不选择英雄，SelectedHero 不存在。

当你的代码被加载时， selectedHero 可能是这样的：

public selectedHero: IHero

在你的构造函数中，你可能有

this.selectedHero = null

selectedHero 在你点击一个英雄之后才会被定义，然后它们就变成了一样的东西。

您可以选择另一个英雄，然后该英雄成为选定的英雄。

如何通过 onSelect() 为 selectedHero 赋予 hero 的值，并且在我使用输入更新 selectedHero 时不影响 hero（但当然要更改 {{selectedHero.name}}）？

您需要去掉 ngModel 周围的 ()。所以它应该说[ngModel]。 () 将 ngModel 指令绑定到事件。 [] 让元素知道它是一个属性。点击没问题，你仍然会将该信息传递给元素。

Answer 2

摘自此处：https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html

如果您使用 [] 语法对 ngModel 进行单向绑定，则在组件类中更改域模型的值将在视图中设置该值。如果您使用 [()] 语法（也称为“香蕉盒语法”）进行双向绑定，则 UI 中的值也将始终同步回您的类中的域模型。`

您使用的是双向绑定，这就是您在 CODE1 中选择的英雄发生变化的原因。

我希望这会有所帮助。