Angular 12中如何统计含vehicle-disabled类的元素数量

原代码问题分析 #

1. 变量作用域混淆：局部变量arr和未声明的this.arr混用，导致逻辑错误。
2. 错误处理查询结果：querySelectorAll返回的是NodeList对象，直接将其推入数组会把整个对象作为一个元素，无法得到实际元素数量。
3. 钩子时机不对：ngOnInit阶段子组件可能未完全渲染，DOM元素可能还未生成，导致查询不到目标元素。

修正后的代码 #

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  name = 'Angular ' + VERSION.major;
  @ViewChild('gdropdown') finddisabled: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    const dom: HTMLElement = this.finddisabled.nativeElement;
    const disabledElements = dom.querySelectorAll('.vehicle-disabled');
    console.log('禁用的下拉元素数量:', disabledElements.length);
  }
}

修改说明 #

• 切换生命周期钩子：使用ngAfterViewInit替代ngOnInit，确保视图及子组件DOM完全渲染后再执行DOM查询。
• 简化统计逻辑：直接利用NodeList的length属性获取目标元素数量，无需额外数组操作。
• 修复变量问题：移除不必要的数组声明，避免作用域混淆。

执行修正后的代码后，控制台会输出目标元素的正确数量（示例中为2）。

内容的提问来源于stack exchange，提问作者EMahan K