Question

我试图与ngModel进行双向数据绑定，但它无法正常工作。包含FormsModule。这里是代码：

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { TestComponent } from './test/test.component';

@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.component.ts：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  person = {
    name: 'David',
    age: '17'
  };

  constructor() { }

  ngOnInit() {
  }

}

test.component.html：

<form>
  <input type="text" [(ngModel)]="person.name" />
  <input type="text" [(ngModel)]="person.age" />
</form>

{{person.name}}<br />
{{person.age}}

为什么它不起作用？

感谢。

Answer 1

您必须在输入中添加name属性。

Answer 2

其他方式是添加

[ngModelOptions]="{standalone: true}"

他明白他不是这种形式的一部分。

双向数据绑定 - 角度2

2 个答案: