@ViewChild zawsze zwraca undefined

Question

Wiem, że zostało to wcześniej zadane, ale żadna z wybranych odpowiedzi nie działa dla mnie.

Próbuję użyć @ViewChild, aby pobrać mój ng-select z dom. I zawsze zwraca niezdefiniowana

oto wybierz wewnątrz main.html

<ng-select id="user-select" 
      #userSelect 
      [allowClear]="true" 
      [items]="singleSignOnUsers" 
      [disabled]="disabled" 
      placeholder="No user selected"> 
      </ng-select> 

tutaj jest moja komponent

import { Component, AfterViewInit, ViewChild } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-main', 
    templateUrl: '../app/main.html', 
    providers: [ApiHttpService, UserAdministrationService] 
}) 

export class AppComponent { 
     @ViewChild('userSelect') userSelect; 


     ngAfterViewInit() { 
      alert(this.userSelect); 
     } 
} 

Czego mi brakuje tutaj?

Aktualizacja: Oh My Soul! Wyjaśniałem, dlaczego to nie działa, kiedy to powinno ... Mam cały widok owinięty w div z ngSwitch. Jeśli go wyprowadzę ... będę miał do nich dostęp. Teraz nie wiem, jak uzyskać do nich dostęp w trybie ngSwitch. Ale może nie trzeba używać ngSwitch

<div [ngSwitch]='loading'> 
     <div *ngSwitchCase="false"> 
      ... 
      <ng-select id="user-select" 
         #userSelect 
         [allowClear]="true" 
         [items]="singleSignOnUsers" 
         [disabled]="disabled" 
         placeholder="No city selected"> 
      </ng-select> 
      ... 
     </div> 
    <div 

Answer 1

@twaldron Używasz trochę opóźnione ładowanie danych w ngOnInit?

Ponieważ w tym przypadku, w moim doświadczeniu, czytając @ViewChild jako ElementRef produkuje żadnych wyników

Jeśli urządzenie posiada dane już rozwiązane (jak przypadku gdy rodzic przechodzi obiektu danych dziecka do sub komponent) powinien działać (przynajmniej dla mnie).

W przypadku asynchronicznego ładowania danych, sposób udało mi się zrobić to praca wykorzystuje powiadomienie o zmianie

@ViewChildren('userSelect') userSelect: QueryList<ElementRef>; 

ngAfterViewInit(): void { 
    this.userSelect.changes.subscribe(item => { 
     if (this.userSelect.length) { 
      alert(this.userSelect.first.nativeElment.outerHTML) 
     } 
    }) 
}