Estoy tratando de vincular mi entrada para poder mostrar una cadena. Pero tengo este error:
Error: list.component.html:3:15 - error TS2322: el tipo 'Evento' no se puede asignar al tipo 'cadena'. .
3 [(ngModel)]="todoItem" ~~~~~~~~~ 4 (teclado) ="addTodo()"
src/app/components/todo-list/todo-list.component.ts:5:16 5 templateUrl: './todo-list.component.html', todo-list.componentn.html : <input type="text" placeholder="What needs to be done" [(ngModel)]="todoItem" /> <div class="item-left" *ngFor="let todo of todos"> <input type='checkbox' > <p>{{todo.title}}</p> </div> todo-list.component.ts: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-todo-list', templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.css'], }) export class TodoListComponent implements OnInit { todos!: Todos[]; todoItem!: string; constructor() {} ngOnInit(): void { this.todoItem = ''; this.todos = [ { id: 1, title: 'Surya', }, ]; } } //interface to help with type error interface Todos { id: number; title: string; }Se puede importar FormsModule en app.module.ts para resolver este problema.
import { FormsModule } from '@angular/forms'; ... imports: [ .., FormsModule ],Guarde y ng sirva el proyecto.
verifique que el módulo del componente exista en el archivo app.module.ts
ngModel se define en el módulo Formularios y, de forma predeterminada, no se importa, por lo que si desea crear cualquier tipo de formulario o quiere usar ngModel , debe importarlo explícitamente.
En app.Module.ts necesitas hacer esto.
import { FormsModule } from '@angular/forms'; imports: [ FormsModule ]Estoy usando módulos personalizados. Así que para mí agregué:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { MyComponent } from './mycomponent.component' import { SomeOtherComponent } from './components/someother.component' @NgModule({ declarations: [ MyComponent, SomeOtherComponent ], imports: [ CommonModule, RealtorToolsRoutingModule, FormsModule ] }) export class MyModule{ }Agregué el módulo de formularios en el módulo principal y los componentes secundarios heredaron FormsModule.
Esta es una alternativa a agregar FormsModule a app.module.ts
También me enfrenté a este problema. Ya he importado FormsModule en app.module. Incluso después de eso, recibí el error "no se puede vincular ngModel, no es una propiedad conocida de entrada". Estaba confundido y pasé mucho tiempo en esto. Afortunadamente, descubrí que no he importado el componente en mi app.module. Usé CLI solo para generar el componente. Pero no estoy seguro de por qué no se ha agregado al módulo de la aplicación. Por lo general, lo hace.
Entonces, si enfrenta este problema, vale la pena verificar una vez en app.module si el componente se agregó a la matriz de declaración.
Agregar una matriz de declaración solucionó mi problema.
Asegúrese de agregar FormsModule en cualquier otro submódulo diferente del módulo de la aplicación, especialmente cuando está usando ngModel en un componente de ese submódulo. Póngalo en la matriz de importación del módulo.
La causa de este error que enfrenté no es exactamente la misma causa del error en la pregunta. Pero dado que es el mismo informe de error, creo que sería útil compartirlo.
También enfrenté este problema, mientras trabajaba con angular 12. Ya importé FormsModule en app.module. Incluso después de eso, recibí el error "El tipo 'Evento' no se puede asignar al tipo 'cadena'". Estaba confundido. Afortunadamente, descubrí que se trataba de un simple error tipográfico, resultó que el mensaje de error no fue muy útil en ese momento; Había usado [(NgModel)] en lugar de [(ngModel)] Simplemente corrigiendo este error tipográfico, el error desapareció.
En mi caso, era ReactiveFormsModule lo que faltaba en mi módulo:
import { ReactiveFormsModule } from '@angular/forms'; ... imports: [ ... ReactiveFormsModule, ... ]Incluya ReactiveFormsModule en su app.module.ts.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule],
Si bien la mayoría de las veces es una importación de FormsModule que falta,
Tuve un caso en el que public-api.ts le faltaba la exportación del módulo de la biblioteca.
agregando
export * from './lib/my-library.module'; to public-api.ts corrigió este error para ese caso en particular.