Angular6@ViewChildren使用标识符

我创建了一个指令，其中包含一个选中的pyb按钮组，该按钮组使用

@ViewChildren

，声明如下：

@ViewChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>

<div class="container" *ngIf="categories">
  <div class="row" pyb-button-group>
    <div class="col-md-4 col-6" *ngFor="let category of categories">
      <a class="btn-choice" [routerLink]="['/' + category.id]">
        <div class="header" #header>
          <span class="title">{{ category.name }}</span>
        </div>
      </a>
    </div>
  </div>
</div>

ngAfterViewInit() {
  console.log(this.headers);
}

它返回

未定义的

我做错什么了吗？
应该是这样的：

@ContentChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>

ngAfterViewInit(){
 this.headers.toArray().forEach(el => {
      console.log(el);
  });
 }
}

@ContentChildren（'header'，{read:ElementRef}）headers:QueryList
ngAfterViewInit（）{
this.headers.toArray（）.forEach（el=>{
控制台日志（el）；
});
}
}

它也可以与ViewChildern一起使用

export class AppComponent {

  @ViewChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>
  categories: {
    name: string
  }[] = [];

  ngOnInit() {
    this.categories = [];
    this.categories.push({ name: "Test" }, { name: "Test2" });
  }

  ngAfterViewInit() {
    console.log(this.headers);
    this.headers.toArray().forEach(header => console.log(header));
  }
}

导出类AppComponent{
@ViewChildren（'header'，{read:ElementRef}）headers:QueryList
类别：{
名称：string
}[] = [];
恩戈尼尼特（）{
此参数为.categories=[]；
push（{name:“Test”}，{name:“Test2”}）；
}
ngAfterViewInit（）{
log（this.headers）；
this.headers.toArray（）.forEach（header=>console.log（header））；
}
}

这是一个工作样本，
类别如何？这是异步数据吗？如果是，则在ngAfterViewInit（）fireslet me update my template:D时可能未完全创建模板。该指令周围有另一个div不应为
@ContentChildren（'header'，{read:ElementRef}）标题：QueryList
？它不应该是
ngAfterContentInit
而不是
ngAfterViewInit
？
.toArray（）的用途是什么？我没有使用该方法，但它仍然有效？@r3我只是为了得到结果而添加的副本，可以不使用。@在给定组件的宿主元素的开始标记和结束标记之间使用的callOfCode元素称为内容子元素，它与初始化视图或内容无关。您的指令在哪里？