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：

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),
    /* ... */
];

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.