Angular 如何正确使用ngModel？为什么我得到未定义和错误？

Question

我在使用此代码时遇到了一些问题，Angular 在我使用输入字段时记录“未定义”，这是一个基本组件，但无法使其工作。

HTML 模板：

<h1>{{ titulo }}</h1>
<ul>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
  <li>hlelo</li>
</ul>

Nombre del parque:

<input type="text" [(ngModel)]="nombreDelParque" (keyup)="mostrarNombre()" />

// this is not binding --> 

Resultado {{ nombreDelParque }}

<br />

<parques></parques>

TS 文件：

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'tienda',
  templateUrl: './tienda.component.html',
  styleUrls: ['./tienda.component.css'],
})
export class TiendaComponent {
  public titulo: string;
  public nombreDelParque: string;
 
  constructor() {
    this.titulo = 'esta es la tienda';
  }
 
  mostrarNombre() {
    console.log(this.nombreDelParque);
  }
}

chrome 的浏览器控制台中出现错误消息，当使用输入字段时，我在控制台上记录为未定义。

Error: src/app/components/tienda/tienda.component.html:18:20 - error NG8002:  
 Can't bind to 'ngModel' since it isn't a known property of 'input'.
        
18 <input type="text" [(ngModel)]="nombreDelParque" (keyup)="mostrarNombre()" />
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
src/app/components/tienda/tienda.component.ts:5:16
5   templateUrl: './tienda.component.html',
                             ~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component TiendaComponent.

Answer 1

您必须在 app.module.ts 中导入 FormsModule 才能使用 ngModal。此外，如果您使用 formbuilder，则需要 ReactiveFormsModule。不要忘记将这些模块添加到导入列表中。
您的 app.module.ts 应该是这样的：

// your modules
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // your modules
    FormsModule,
    ReactiveFormsModule
  ], 
  declarations: []
  }
)

Angular 如何正确使用ngModel？为什么我得到未定义和错误？

Angular how to use ngModel correctly? Why I get undefined and errors?

typescript

ngmodel

angular