ngModel 在输入字段中不起作用

Question

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

app.component.html file

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

Answer 1

要使用ngModel，您应该首先导入它。

在 app.module.ts 中，只需添加：

import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})

Answer 2

1( 输入标记中缺少<符号>

2(属性"名称"必须设置为公共才能在视图中访问该属性

Answer 3

您可能要求"绑定如何工作"

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

• 如果您只使用[]则意味着您只是绑定值，这称为属性绑定

• 如果您只使用()则表示它只是事件绑定并在更改时触发事件，单击等。

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