Angular TypeScript使用getElementsByClassName设置title报属性不存在错误

你遇到的编译报错来自两个问题：

• 代码笔误：getElementsByClassName 方法名末尾漏写了s，你原代码中的getElementByClassName是不存在的错误方法名
• TypeScript类型校验限制：document.getElementsByClassName 默认返回的是Element类型的集合，基础Element类型没有定义title属性，只有HTMLElement子类才包含title属性，需要手动做类型断言

方案1：修复现有原生DOM写法 #

如果要继续沿用直接操作document的写法，调整为以下代码即可：

// 类型断言指定元素为HTMLElement类型，同时加非空判断规避元素不存在的运行时报错
const gridFilterEl = document.getElementsByClassName('grid-filter')[0] as HTMLElement;
if (gridFilterEl) {
  gridFilterEl.title = 'new title';
}

注意：直接操作document的方式不符合Angular框架设计规范，在服务端渲染、元素未挂载等场景下容易出现异常，更推荐使用下面的Angular原生方案。

方案2：Angular官方推荐操作方式 #

第一步：给模板元素添加引用变量 #

在组件对应的HTML模板中，给目标元素加模板引用标识：

<div class="grid-filter" #gridFilter>...</div>

第二步：组件中通过ViewChild获取元素并赋值 #

在组件TS文件中通过Angular提供的ViewChild装饰器获取元素引用：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 你的组件配置
})
export class YourComponent implements AfterViewInit {
  // 绑定模板中的引用变量
  @ViewChild('gridFilter') gridFilterRef!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 视图初始化完成后再操作元素
    if (this.gridFilterRef?.nativeElement) {
      this.gridFilterRef.nativeElement.title = 'new title';
    }
  }
}

内容的提问来源于stack exchange，提问作者krishna mohan