как получить html элементов, созданных с помощью цикла ngfor - PullRequest
Новая
       12

как получить html элементов, созданных с помощью цикла ngfor

1 голос
/ 20 апреля 2020

Привет всем, вот упрощение моей проблемы

Я создал элементы в своем шаблоне, используя * ngfor 

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

 </table>

в файле .ts У меня есть таблица 

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

и затем, когда я пытаюсь отобразить элементы в консоли 

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

, отображается undefined

Ответы [ 2 ]

2 голосов
/ 20 апреля 2020

В Angular, Вы можете использовать другой подход.

1) Дайте некоторую ссылку #theadEl на th элемент, например, 

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

2) Затем в файле ts выполните импорт из @angular/core, например, 

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

3) Вам необходимо использовать viewChildren вместе с 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);
  }

Наконец,

компонент. 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);
  }

}

Рабочие Stackblitz Здесь ...

Примечание: Выше приведен лучший способ использования, но, тем не менее, если вы хотите использовать тот же метод, что и document.getElementsByTagName('th');, то вам нужно сделать код в ngAfterViewInit ловушка жизненного цикла, как показано в примере ниже.

Stackblitz с document.getElemen Метод tsByTagName ('th')

Причина использования ngAfterViewInit состоит в том, что он полностью инициализирует представление компонента.

0 голосов
/ 20 апреля 2020

Если вы действительно хотите его использовать, document.getElementsByTagName('th'); также работает в Angular. Пример должен работать нормально, и console.log(cells[1]); вывести на консоль следующее: 

<th _ngcontent-c0> 2</th>

Если в вашем случае это приведет к undefined, table, возможно, еще не было создано во время, когда Вы вызываете команду. Я могу подумать о следующих двух причинах, которые могут быть причиной этого:

  1. table содержится в элементе, который в настоящее время не включен в документ из-за *ngIf это приводит к false.
  2. Команда вызывается в конструкторе в момент, когда table не был создан в последовательности жизненного цикла .
...