Angular 8中如何为表格<tr>下的每个<td>添加类名并设置样式

尝试用TypeScript为表格每行<tr>的首个<td>元素添加类名和设置样式，但操作未生效，相关代码如下：

原代码（app.component.ts） #

ngOnInit() {
  this.elRef.nativeElement
    .querySelectorAll('#contect table tbody tr')
    .forEach((element, index, array) => {
      console.log(element);

      element.forEach((element, index, array) => {
        if (index == 0) {//first td of tr
          element.classList.add('bg');
          element.style.right = '2px';
        } 
      });
    });
}

问题原因 #

• <tr>是单个DOM元素，没有forEach方法，直接在element（即tr元素）上调用forEach会报错，导致后续逻辑执行失败
• Angular的ngOnInit钩子执行时，视图可能还未完全渲染完成，此时通过nativeElement可能获取不到目标DOM元素

解决方案 #

方案1：修正DOM遍历逻辑 + 确保视图渲染完成 #

用AfterViewInit钩子替代ngOnInit，同时在tr元素内查询所有<td>再操作：

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

// 组件类需实现AfterViewInit接口
export class AppComponent implements AfterViewInit {
  constructor(private elRef: ElementRef) {}

  ngAfterViewInit() {
    this.elRef.nativeElement
      .querySelectorAll('#contect table tbody tr')
      .forEach((trElement) => {
        // 获取当前tr下的所有td元素
        const tdElements = trElement.querySelectorAll('td');
        if (tdElements.length > 0) {
          const firstTd = tdElements[0];
          firstTd.classList.add('bg');
          // right属性需配合定位属性才生效，先设置position
          firstTd.style.position = 'relative';
          firstTd.style.right = '2px';
        }
      });
  }
}

方案2：更符合Angular风格的实现（无需手动操作DOM） #

推荐使用Angular内置指令实现，避免直接操作DOM：

1. 在组件模板中给每行首个<td>绑定类和样式：

<div id="contect">
  <table>
    <tbody>
      <tr *ngFor="let item of dataList">
        <td [class.bg]="true" [style.position]="'relative'" [style.right]="'2px'">
          {{ item.firstColumn }}
        </td>
        <td>{{ item.secondColumn }}</td>
        <!-- 其他列 -->
      </tr>
    </tbody>
  </table>
</div>

2. 在组件CSS中定义.bg类的样式：

.bg {
  background-color: #f0f0f0;
  /* 其他自定义样式 */
}

补充说明 #

• 若必须操作DOM，务必在ngAfterViewInit钩子中执行，此时视图已完全渲染完成
• style.right属性生效的前提是元素设置了position（如relative/absolute/fixed），否则不会产生视觉效果

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