angular的@ViewChild和@ViewChildren获取不到元素

Question

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

@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html',
  styleUrls: ['./locations.component.scss']
})
export class LocationsComponent implements AfterViewInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
  @ViewChild('test', { read: ElementRef })
  public itemDiv: ElementRef;
  @ViewChildren('item')
  public itemDivs: QueryList<ElementRef>;
  public ngAfterViewInit() {
    setTimeout(() => {
      console.log('sssss', this.itemDiv);
      console.log('sssssb', this.itemDivs);
    }, 0);
  }

}

<div class="row no-gutters h-100" id="test">
  <div class="col-4 item">
    <app-locations-list></app-locations-list>
  </div>
  <div class="col-4 item">
  </div>
  <div class="col-4 item">
    One of three columns
  </div>
</div>

结果：

请问我代码是哪里出了问题？新入门，请多多指教！

Answer 1

html中应该是#test, 而不是设置id