Обновление имени с помощью ngModel

Question

У меня есть класс, который экспортирует:

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", произойдет сбой моего сайта.Что я делаю не так?

Answer 1

Правильный HTML-код выглядит следующим образом:

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

ИЛИ обновляйте элемент, когда поле ввода теряет фокус.

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

Answer 2

Это работает:

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

Это не работает:

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