2

Estoy tratando de asignar estilos a un elemento, he intentado usar el decorador @ViewChild, pero al compilar salta un error: Property #element# has no initializer and is not definitely assigned in constructor.

La idea es acceder al elemento como siempre se ha hecho con JavaScript (document.getElementById(#elemento).style...), sin embargo esta práctica se desaconseja y he mirado otras formas, en otros artículos hacen referencia a la clase Renderer2, que es la mejor forma para trabajar con el DOM.

Dejo el código por aquí para que le echéis un ojo, a ver si encontráis el error:

HTML

<div #roompanel...

TS

import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
...
export class CastComponent implements OnInit {
    @ViewChild("roompanel") roompanel: ElementRef;
    ...
    constructor (private renderer:Renderer2) {
    }
    showpanel(){
        this.renderer.setStyle(this.roompanel.nativeElement, 'display', 'flex');
    }
}

Aquí muestro una captura del error exacto. introducir la descripción de la imagen aquí

En algunos foros indican que colocar ! después de roompanel soluciona el problema, y es cierto, pero no me deja tranquilo porque no sé qué está haciendo exactamente.

Creo que no es necesario aclarar que soy muy nuevo en Angular y todavía estoy aprendiendo.

1 respuesta 1

11

El mensaje Property has no initializer and is not definitely assigned in the constructor puede aparecer al agregar alguna configuración en el archivo tsconfig.json para tener un proyecto Angular compilado en modo estricto.

"compilerOptions": {
  "strict": true,
  "noImplicitAny": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictPropertyInitialization": true,

Eso hace que el compilador genere un error si una variable no se ha inicializado antes de ser usada. Para evitar ese error de compilación se puede usar una característica de typescript llamada Definite Assignment Assertions en la que se usa el operador ! al final del nombre de la variable para asegurarle al compilador que se le dará un valor a la variable antes de usarla.

2
  • 1
    Probé con eso también, pero no sirvió, así que di por hecho que no era la solución. El error hace referencia al constructor, la propiedad roompanel no está inicializada. Dejo el enlace donde vi la "solución" de incluir ! antes de declarar el tipo: stackoverflow.com/a/50074076 Commented el 22 mar. 2021 a las 8:27
  • Entiendo. Edité la respuesta para explicar lo que hace el operador !.
    – Lobos
    Commented el 22 mar. 2021 a las 13:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.