如何获取使用 ngfor 循环创建的 html 个元素

Question

大家好这里是我问题的简单化

我使用 *ngfor

在我的模板中创建了元素

<table >
  <thead>
  <tr>
    <th *ngFor="let item of array" > {{item}}</th>
  </tr>
  </thead>

 </table>

在 .ts 文件中我有 table

array = [1,2,3,4];

然后当我尝试在控制台中显示元素时

  var cells = document.getElementsByTagName('th'); //or getElementById or anything..
  console.log(cells[1]);

显示 未定义

Answer 1

在 Angular 中，您可以采用不同的方法。

1) 给一些参考 #theadEl 到 th 元素 like,

<th *ngFor="let item of array" #theadEl> {{item}}</th>

2) 然后在 ts 文件中从 @angular/core 导入一些东西，比如

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

3) 如果我们试图获取多个元素，则需要使用 viewChildren along with QueryList，例如

 @ViewChildren('theadEl') theadEl: QueryList<ElementRef>

4) 然后在ngAfterViewInit生命周期钩子中，可以使用，

  ngAfterViewInit(): void {
    const cells = this.theadEl.toArray();
    console.log(cells[1].nativeElement);
    console.log(cells[1].nativeElement.innerHTML);
  }

最后，

component.html

<table >
  <thead>
  <tr>
    <th *ngFor="let item of array" #theadEl> {{item}}</th>
  </tr>
  </thead>
 </table>

component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';

  array = [1,2,3,4];

  @ViewChildren('theadEl') theadEl: QueryList<ElementRef>


  ngAfterViewInit(): void {
    const cells = this.theadEl.toArray();
    console.log(cells[1].nativeElement);
    console.log(cells[1].nativeElement.innerHTML);
  }

}

Working Stackblitz Here...

注意：以上是最佳使用方法，但如果你想使用与document.getElementsByTagName('th');相同的方法，那么你需要把代码写成ngAfterViewInit 生命周期钩子如下例所示。

Stackblitz with document.getElementsByTagName('th') method

使用 ngAfterViewInit 的原因是，它完全初始化组件的视图。

Answer 2

如果你真的想用它，document.getElementsByTagName('th');在Angular中也有效。该示例应该可以正常工作，console.log(cells[1]); 将以下内容打印到控制台。

<th _ngcontent-c0> 2</th>

如果在您的情况下它导致 undefined，则在您调用该命令时可能尚未创建 table。我可以想到以下两个可能导致此问题的原因。

table 包含在当前未包含在文档中的元素中，因为 *ngIf 结果为 false。
在 lifecycle sequence 中尚未创建 table 时在构造函数中调用该命令。

如何获取使用 ngfor 循环创建的 html 个元素

how to get html elements created with an ngfor loop

angular

ngfor