ngModel数据绑定不起作用

问题描述

我正在关注英雄之旅"教程，无法弄清楚ngModel为什么不更新hero.name或只是不更新​​视图.我输入了内容，但视图中显示的名称保持不变(Windstorm).

I'm following the Tour of Heroes tutorial and cannot figure out why ngModel is not updating hero.name or if it's just not updating the view. I type into the input but the displayed name in the view remains the same (Windstorm).

请让我知道我在这里做错了.

Please let me know what I am doing wrong here.

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;
}

推荐答案

([ngModel])应该为[(ngModel)].它被称为bananas-in-a-box-notation;)( https://www.bennadel.com/blog/3008-two-way-data-binding-is-just-a -box-of-bananas-in-angular-2-beta-1.htm )

([ngModel]) should be [(ngModel)]. It's called the bananas-in-a-box-notation ;) (https://www.bennadel.com/blog/3008-two-way-data-binding-is-just-a-box-of-bananas-in-angular-2-beta-1.htm)

这篇关于ngModel数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！