Угловой список доступа 5 div с использованием @ViewChildren

Question

Я хочу получить все div, начиная с id 'div'. Для этого я использую @ViewChildren, но я не могу получить доступ к div, потому что у меня есть пустой массив, почему?

Мой шаблон

<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<input type="button" (click)="getDivs()">

Составная часть

@ViewChildren('div') divs: QueryList<any>;
divList : any[];

getDivs(){ 
   this.divList = this.divs.filter(x => x.id.lastIndexOf('div-', 0) === 0);  
   console.log(this.divList);  
      // this.divList return an empty array but i should have two results  
}

Answer 1

Как уже упоминалось в этом подробном ответе, действительные селекторы для ViewChildren включает в себя типы компонентов, типы директив и переменные ссылки на шаблон. Вы не можете получить элементы DOM с ViewChildren использование CSS-селекторов, таких как типы элементов HTML (например, div) или имена классов.

Один из способов заставить его работать в вашем случае - это сгенерировать div элементы с ngFor цикл, и связать шаблонную переменную ссылки #divs им:

<div #divs *ngFor="let item of [1,2]" [id]="'div-' + item">Div {{item}}</div>
<button (click)="getDivs()">Get divs</button>

Затем вы можете получить их в коде с ViewChildrenс использованием ссылочной переменной шаблона:

@ViewChildren("divs") divs: QueryList<ElementRef>;

getDivs() {
  this.divs.forEach((div: ElementRef) => console.log(div.nativeElement));
}

Смотрите этот стек для демонстрации.

Answer 2

Мне удалось добиться необходимого результата, создав пользовательскую директиву и запросив ее следующим образом:

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

@Directive({selector: 'table th'})
export class DatatableHeadersDirective {
  nativeElement: HTMLTableHeaderCellElement = null;
  constructor(el: ElementRef) {
    this.nativeElement = el.nativeElement;
  }
}

@Component({
  selector: 'selctorname',
  templateUrl: 'htmlURL',
  styleUrls: ['styleURL'],
})
export class AwesomeDatatableComponent implements AfterViewInit {
  @ViewChildren(DatatableHeadersDirective) children: QueryList<DatatableHeadersDirective>;;

  ngAfterViewInit(){
    console.log(this.children.map(directive => directive.nativeElement))
  }
}