使用 ngModel 更新名称答案

【问题标题】：Updating name with ngModel使用 ngModel 更新名称
【发布时间】：2019-07-03 01:17:21
【问题描述】：

我有一个出口的班级：

tempHero: Hero = {
    name: 'Hello',
    attribute: 'Hi',
    description: 'None',
    imagePath: 'Yes',
    spell: this.spell
  }

 onUpdateHeroName(event: any) {
     this.tempHero.name = event.target.value
  }

如果我使用以下方法来更新名称，那么它会很有效，我可以在我的模板中打印出 tempHero.name。

如果我改为使用 [(ngModel)]="tempHero.name" 设置输入，我的网站会崩溃。我做错了什么？

【问题讨论】：

是否定义了 event.target.value？
“我的网站崩溃”是什么意思？您收到任何错误消息吗？
能否添加您的HTML 代码
我正在尝试用新的替换上面的输入。
{{ tempHero.name }} 这行得通

标签： angular data-binding

【解决方案1】：

这行得通：

    <input type="text" class="form-control" (input)="onUpdateHeroName($event)">
    {{ tempHero.name }}

这不起作用：

    <input type="text" class="form-control" [(ngModel)]="tempHero.name">
    {{ tempHero.name }}

【讨论】：

【解决方案2】：

正确的html-angular代码如下：

<input type="text" class="form-control" (input)="onUpdateHeroName($event)">
{{ tempHero.name }}

或者当输入框失去焦点时更新元素。

<input type="text" class="form-control" (blur)="onUpdateHeroName($event)">
{{ tempHero.name }}

【讨论】：