ngModel привязка данных не работает

Question

Я следую учебнику Tour of Heroes и не могу понять, почему ngModel не обновляет hero.name или просто не обновляет представление. Я набираю данные, но отображаемое имя на виде остается неизменным (Windstorm).

Пожалуйста, дайте мне знать, что я здесь делаю неправильно.

heroes.component.html

<h2>{{ hero.name | uppercase }}</h2>
<div><span>id: </span>{{ hero.id }}</div>
<div>
  <label>name
    <input ([ngModel])="hero.name" placeholder="name">
  </label>
</div>

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
  constructor() { }

  ngOnInit() {
  }

}

hero.ts

export class Hero {
  id: number;
  name: string;
}

Answer 1

Откройте AppModule (app.module.ts) и импортируйте символ FormsModule из библиотеки @ angular / forms.

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

Затем добавьте FormsModule в массив импорта метаданных @NgModule, который содержит список внешних модулей, которые нужны приложению.

imports: [
  BrowserModule,
  FormsModule
],

Когда браузер обновляется, приложение должно снова работать. Вы можете отредактировать имя героя и увидеть изменения, отраженные сразу в текстовом поле выше.

---

источник: угловой документ.

Answer 2

([ngModel]) должно быть [(ngModel)]. Это называется «бананы в коробке»;) (https://www.bennadel.com/blog/3008-two-way-data-binding-is-just-a-box-of-bananas-in-angular-2-beta-1.htm)