While run my angular project got
Property ' ' has no initializer and is not definitely assigned in the constructor
near all variables inside modal. I am new in Angular. I am stuck due to this error and I Googled for this error but no solution found. I see this answer Property '...' has no initializer and is not definitely assigned in the constructor also but it did not solve my problem. My Node version is 16.14.0 and my Npm version is 8.3.1.
Here down is my code:
Modal
export class Todo{
// got error in below variables
sno: number
title: string
desc: string
active: boolean
}
todos.component.ts
import { Component, OnInit } from '@angular/core';
import { Todo } from '../../Todo';
@Component({
selector: 'app-todos',
templateUrl: './todos.component.html',
styleUrls: ['./todos.component.css']
})
export class TodosComponent implements OnInit {
todos!: Todo[];
constructor() {
this.todos = [
{
sno: 1,
title: "Title1",
desc: "description1",
active: true
},
{
sno: 2,
title: "Title2",
desc: "description2",
active: true
},
{
sno: 3,
title: "Title3",
desc: "description3",
active: true
}
]
}
ngOnInit(): void {
}
}
HTML
<div >
<ul *ngFor="let todo of todos">
<li>{{todo.sno}} - {{todo.title}} - {{todo.desc}} - {{todo.active}}</li>
</ul>
</div>
CodePudding user response:
If you don't provide default values for class members or explicitly initialise them in the constructor, strict TypeScript assumes there is a problem. In fact, the error tells you exactly what is wrong.
Generally, you can get away with adding a !
to your properties to reassure TypeScript that those fields will definitely be initialised. Otherwise, either make them optional with ?
, give them default values, or build a constructor which initialises them.
CodePudding user response:
export class Todo{
// got error in below variables
sno: number
title: string
desc: string
active: boolean
}
If this is the complete class definition, then you should be able to see definitively that this class has no constructor and does not give default values to its properties.
First off, if you just want to declare a "shape" of the data and don't need to check "instance of", have runtime properties of functions, you could just define this as a type
or interface
instead. Then, no other changes are needed in the shown code.
export interface Todo{
sno: number
title: string
desc: string
active: boolean
}
If you really feel it needs to be a class, you should define a constructor and use it so you do have instances of the class where you say you have those.
Here is just one of the many ways to do this:
export class Todo{
sno: number
title: string
desc: string
active: boolean
constructor(sno: number, title: string, desc: string, active: boolean) {
this.snow = snow;
this.title = title;
this.desc = desc;
this.active = active;
}
}
this.todos = [
new Todo(1, "Title1", "description1", true),
/* ... */
];