Question

问题在最后。

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

我正在做official tutorial of angular，我不明白第3章中的一点。主人/细节。

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的文本会发生变化。为什么？因为我尝试使用角度为1.5的类似代码，并且CODE1的文本不会更新。

我想更改输入，{{selectedHero.name}}的文字，而不是{{hero.name}}

SelectedHero 等于英雄，但不是相反，不是吗？
如何使用 onSelect（）为 selectedHero 提供英雄的值，而不会影响英雄使用输入更新 selectedHero （但更改课程 {{selectedHero.name}} ）？

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

当我更改输入[（ngModel）] =“selectedHero.name”中的值时，我想更改{{selectedHero.name}}的值，但不要更改{{hero.name}的值}。我怎么能成功呢？谢谢。

编辑2 QT Ray 在评论中给出答案。

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

我们需要更换

this.selectedHero = hero;

通过

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

或使用深层复制（使用lodash）

this.selectedHero = _.cloneDeep(hero)

Answer 1

SelectedHero等于英雄，但不是相反，不是吗？

在那种情况下，是的。 SelectedHero和英雄是一样的。如果没有选择英雄，SelectedHero就不存在。

加载代码后，selectedHero可能类似于：

public selectedHero: IHero

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

this.selectedHero = null

在您点击一个英雄然后它们变成同一个东西之前，未定义selectedHero。

你可以选择另一个英雄，然后Hero成为选择的Hero。

如何使用onSelect（）赋予selectedHero英雄的值，并且当我使用输入更新selectedHero时，不会影响英雄（但更改课程{{selectedHero.name}}）？

你需要摆脱ngModel周围的（）。所以应该说[ngModel]。（）将ngModel指令绑定到事件。 []让元素知道它是一个属性。点击很好，您仍然会将该信息传递给元素。

Answer 2

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

如果使用[]语法对ngModel进行单向绑定，则更改组件类中域模型的值将在视图中设置值。如果您使用[（）]语法（也称为'banana-box syntax'）进行双向绑定，则UI中的值也将始终同步回您班级中的域模型。

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

我希望这会有所帮助。

Angular 2教程 - 使用绑定误解

2 个答案: