错误 TS2322：类型“事件”不可分配给类型“布尔值”

Question

I'm writing a todolist demo. When ng serve it, it shows an error:

Error: src/app/app.component.html:17:58 - error TS2322: Type 'Event' is not assignable to type 'boolean'.
17  <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" >
                                                       ~~~~~~~~~~~~~~
18 
19  <label>{{ todo.title }}</label>
   ~~

Also all items not be checked.(even their isDone status is true)

I def an object in app.component.ts.

 public todos:{ id:number, title: string, isDone: boolean }[]=todos const todos=[ { id:1, title:'study', isDone:true },{ id:2, title:'sleep', isDone:true },{ id:3, title:'drink', isDone:true } ]

app.component.html as below.

 <li *ngFor="let todo of todos"> <div class="view"> <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" > <label>{{ todo.title }}</label> <button class="destroy"></button> </div> <input class="edit" value="Create a TodoMVC template"> </li>

Can anyone see what I'm doing wrong? thanks!

Answer 1

When I got this error, it was because I forgot to import the FormsModule in app.module.ts . So in app.module.ts:

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

Answer 2

change you code from <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" > to this...

<input class="toggle" type="checkbox" [(ngModel)]="todo.isDone" >

Here, ngModule is not recognizing..

Answer 3

In my case it was because I had made my own component and it didn't have the output event emitter (visibleChange) defined.

Code sample with emitter highlighted:

export class DialogComponent {
@Input() header = '';
@Input() message = '';

@Input()
get visible(): boolean { return this._visible; }
set visible(value: boolean) {
    this._visible = value;
}
private _visible = false;

@Output() visibleChange = new EventEmitter<boolean>();

@Output() closeDialog = new EventEmitter<void>();

onCloseDialog(): void {
    this.closeDialog.emit();
}

}

Answer 4

This error can also happen in the following situation:

• you are using CUSTOM_ELEMENTS_SCHEMA in your "outer" module
• you are binding to a component from another module
• and you do not have the component to which you are binding as part of the exports from the module declaring the component.

The fix is to export the component from its declaring module.