-2

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. 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 class="container-fluid">
    <ul *ngFor="let todo of todos">
        <li>{{todo.sno}} - {{todo.title}} - {{todo.desc}} - {{todo.active}}</li>
    </ul>
</div>
Faheem azaz Bhanej
  • 2,328
  • 3
  • 14
  • 29
  • Why do you refer to this as `angular js`? Looking at the code and the tag this is angular. (I am not the downvoter) – Igor Mar 07 '22 at 14:00
  • Please [edit] your question to indicate *how* you've applied each of the answers from the linked question. Currently it appears as though at least one of those 30 answers will solve your problem. – Heretic Monkey Mar 07 '22 at 14:25
  • _"it did not solve my problem"_ What did not solve your problem? What's the difference between your question and the duplicate? – jabaa Mar 07 '22 at 14:27
  • 1
    Does this answer your question? [Property '...' has no initializer and is not definitely assigned in the constructor](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) – Heretic Monkey Mar 07 '22 at 14:51

2 Answers2

2
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),
    /* ... */
];
crashmstr
  • 28,043
  • 9
  • 61
  • 79
1

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.

Will Alexander
  • 3,425
  • 1
  • 10
  • 17