angular - @ViewChild 总是返回 undefined

Question

我知道以前有人问过这个问题，但所选的答案都不适合我。

我正在尝试使用 @ViewChild 从 dom 中获取我的 ng-select。它总是返回 undefined。

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

我在这里错过了什么？

更新:哦，我的灵魂! 我弄清楚了为什么这在应该起作用的时候不起作用。

我将整个 View 包裹在带有 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)
        }
    })
 }