Список разделов доступа Angular 5 с использованием @ViewChildren

Как упоминалось в этот подробный ответ, допустимые селекторы для 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.info(div.nativeElement));
}

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

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

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.info(this.children.map(directive => directive.nativeElement))
  }
}