@ViewChild 總是返回 undefined

Question

我知道以前有人問過這個問題，但沒有一個選定的答案對我有用。

我正在嘗試使用@ViewChild從dom 中獲取我的ng-select 。 它總是返回未定義的。

這是 main.html 里面的main.html ：

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

這是我的組件

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);
    }
}

我在這里想念什么？

更新：哦，我的靈魂。 我弄清楚了為什么這在應該的時候不起作用

我將整個視圖包裹在一個帶有ngSwitch的div中。 如果我將其移出，我可以訪問它們。

但是，現在我不知道如何在ngSwitch中訪問它們。 但我不必使用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 您是否在 ngOnInit 中使用了一些延遲數據加載？

因為在這種情況下，根據我的經驗，將 @ViewChild 作為 ElementRef 讀取不會產生任何結果

如果您的組件已經解析了數據（就像父組件將子數據對象傳遞給子組件的情況）它應該可以工作（至少對我來說是這樣）。

在異步數據加載的情況下，我能夠使其工作的方式是使用更改通知

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

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

Answer 2

我替換了所有出現的

*ngIf="flag"

與

[style.display]="flag ? 'block' : 'none'"

讓它在我的情況下始終如一地工作。 否則，當我的視圖第一次加載時不存在的ViewChild組件可能永遠保持未定義狀態。

Answer 3

就我而言，我遇到了同樣的問題。 我console.log() -ed 從子組件檢索的內容，它給了我“未定義”。

我只是通過刷新頁面來解決它。 ctrl + shift + R可能會有所幫助。 我猜是因為瀏覽器的緩存導致了這個問題。

Answer 4

ngSwitch 正是原因所在。 （對於這種情況，ngIf 也不起作用）

使用類修復它，以便它仍然呈現所有內容並隱藏它。

CSS

.show{
  display: block !important;
}

.hide{
  display: none;
}

HTML

 <div [ngClass]="{'show': someVariable === 'someVariable'}" class="hide">
   <input type="text" #search />
 </div>

編輯：@Sreeram Nair 的答案也有效，甚至更優雅。