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

Question

我有一些问题与这段代码，角日志“未定义”时，我使用输入字段，它是一个基本的组件，但不能使它工作。

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: []
  }
)