Home / Questions / 437201
Accepted
Marcos Rodríguez
Asked: 2022-03-22 08:42:12 +0800 CST 2022-03-22 08:42:12 +0800 CST

@ViewChild 的编译器问题：属性没有初始化程序，并且未在构造函数中明确分配

  • 772

我正在尝试为元素分配样式，我尝试使用 @ViewChild 装饰器，但是在编译时出现错误：Property #element# has no initializer and is not definitely assigned in constructor.

这个想法是访问元素，就像它一直使用 JavaScript ( document.getElementById(#elemento).style...) 完成的那样，但是这种做法是不鼓励的，我已经研究了其他方式，在其他文章中它们引用了 Renderer2 类，这是使用 Renderer2 类的最佳方式DOM。

我将代码留在这里供您查看，看看您是否发现错误：

HTML

<div #roompanel...

英石

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');
    }
}

这是确切错误的屏幕截图。 在此处输入图像描述

在一些论坛中，他们表示放置！在 roompanel 之后它解决了问题，这是真的，但它并没有让我安心，因为我不知道它到底在做什么。

我认为不用说我对 Angular 还是很陌生，而且还在学习。

angular

1 Answers

  1. Best Answer

    Property has no initializer and is not definitely assigned in the constructor在 tsconfig.json 文件中添加一些配置以在严格模式下编译 Angular 项目时，可能会出现该消息。

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

    如果变量在使用之前没有被初始化，这会导致编译器引发错误。为避免该编译错误，您可以使用名为Definite Assignment Assertions的打字稿功能，在该功能中，您在变量名称末尾使用运算符!来确保编译器在使用该变量之前将被赋予一个值。

    • 9