Question

我跟随英雄之旅教程，无法弄清楚为什么ngModel没有更新hero.name或者它只是没有更新视图。我键入输入，但视图中显示的名称保持不变（风暴）。

请告诉我这里的错误。

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

NEXUS_USERNAME=admin NEXUS_PASSWORD=admin123 NEXUS_SERVER=server.com/yourserver NEXUS_REPOSITORY=raw echo "Sending backup to server" curl -v -u ${NEXUS_USERNAME}:${NEXUS_PASSWORD} --upload-file ${UPLOAD_FILE} http://${NEXUS_SERVER}/repository/${NEXUS_REPOSITORY}/${UPLOAD_FILE}应为([ngModel])。它被称为香蕉盒中的符号;）（https://www.bennadel.com/blog/3008-two-way-data-binding-is-just-a-box-of-bananas-in-angular-2-beta-1.htm）

Answer 2

打开AppModule（app.module.ts），然后从@ angular / forms库导入FormsModule符号。

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

然后将FormsModule添加到@NgModule元数据的imports数组，该数组包含应用程序所需的外部模块的列表。

imports: [
  BrowserModule,
  FormsModule
],

浏览器刷新后，该应用应会再次运行。您可以编辑英雄的名字，并在文本框上方立即看到更改。

来源： angular doc.

ngModel数据绑定无法正常工作

2 个答案: