How to solve a typescript initialization issue in my Angular project?

Question

I have an Angular project and I'm trying to define a variable with the following type:

navbarLinks: QueryList<ElementRef>;

but I get the following error:

Property 'navbarLinks' has no initializer and is not definitely assigned in the constructor.

30   navbarLinks: QueryList<ElementRef>;

Now, I don't want to use this as a solution:

navbarLinks!: QueryList<ElementRef>;

Is there any other way I can fix this?

Either you initialize navbarLinks in the constructor, then you can just use your original code. Or you initialize it directly (i.e. not within a subscribe or then callback) in ngOnInit. That's what !: is for. Or you initialize it somewhere else, then it may be undefined so you use navbarLinks?: QueryList<ElementRef>; and handle the undefined case. — Clashsoft
– Clashsoft, Commented Dec 18, 2021 at 11:37

Philipp Meissner · Accepted Answer · 2021-12-18 12:04:01Z

3

If you really do not want to set a default value to this property you need to adjust your type to

navbarLinks?: QueryList<ElementRef>;

which is the same as

navbarLinks: QueryList<ElementRef> | undefined;

Another solution would be to give the property a default value. As I don't know what the QueryList<T> interface looks like, I can't really give you an example.

answered Dec 18, 2021 at 12:04

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to solve a typescript initialization issue in my Angular project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related