ngModel 在输入字段中不起作用答案

【问题标题】：ngModel does not work in the input fieldngModel 在输入字段中不起作用
【发布时间】：2018-06-27 09:57:37
【问题描述】：

我刚刚开始使用 Angular 并尝试了一件简单的事情。当我在输入字段中输入名称时，Angular 应该更新 DOM。但是，当我像 [(ngModel)] 一样使用这些括号 [] 时，它不仅不起作用，而且输入字段从 DOM 中消失了。如果没有这些 [] 括号，它也不起作用。请帮忙

app.component.html 文件

 input type="text" [(ngModel)] = "name">
 <p>{{ name }}</p>

app.component.ts 文件

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: '.app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}

【问题讨论】：

查看这个帖子stackoverflow.com/questions/43298011/…

标签： angular

【解决方案1】：

要使用ngModel，首先要导入它。

在app.module.ts中，添加：

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

【讨论】：

即使完全不使用 ngModel，OP 的情况也不起作用

【解决方案2】：

1) 输入标签中缺少

2) 属性“name”必须设为公开才能在视图中访问它

【讨论】：

谢谢，我的代码中有
public name : string = ''（末尾有单引号）

【解决方案3】：

你可能会问“绑定是如何工作的”

([(ngModel)]) = 也叫香蕉盒

如果您只使用[]，则意味着您只是绑定值，称为属性绑定
如果你只使用()这意味着它只是事件绑定和触发事件，点击等。

如果您同时使用两者，则表示 Angular 中的 two-way binding。它会将值更新到 DOM 以及您的控制器端。

【讨论】：