时间戳

首页 > 解决方案 > 属性 'map' 没有初始化程序，也没有在构造函数 @ViewChild 中明确分配

angular - 属性 'map' 没有初始化程序，也没有在构造函数 @ViewChild 中明确分配

问题描述

我想获得一个带有 DOM 操作的 HTML 元素。当我尝试使用 ViewChild 获取元素时，会出现以下错误。当我单击快速修复时，它会添加 | 不明确的。但是这次我不能将变量称为 this.map

属性 'map' 没有初始化器，也没有在构造函数中明确分配。

import { Component, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core';
export class SlideComponent implements OnInit, AfterViewInit{

  @ViewChild('el', { static: true}) map: ElementRef;

  constructor() { 
  }

  ngOnInit(): void {
  }
  ngAfterViewInit(){
    console.log(this.map.nativeElement);
  }
}

html元素

<div class="carousel_track_container" #el></div>

标签： angular

解决方案

当您使用 Angular 的严格模式时会发生这种情况。通过确保正确声明变量，您不会遇到错误变得非常谨慎。

换句话说，如果您向类添加一个全局变量，您要么必须在构造函数中设置它，要么添加 undefined 作为可能的返回类型。这是因为如果你不在构造函数中设置它，你可能根本不会设置它。

选项 1：您不确定是否需要使用它：

@ViewChild('el', { static: true}) map: ElementRef | undefined;

选项2：在构造函数中设置变量

注意：由于您使用的是 ViewChild，它尚不存在，因此您只能将其设置为未定义。

@ViewChild('el', { static: true}) map: ElementRef;

  constructor() { 
      this.map = undefined;
  }

推荐阅读