@ViewChild总是返回undefined

Question

我知道以前有人问过这个问题，但选择的答案对我来说都不起作用。

我正在尝试使用@ViewChild从dom获取我的ng-select。并且它总是返回未定义的。

下面是main.html中的select

<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()’。

我仅仅通过刷新页面就解决了这个问题。ctrl+shift+R可能会有所帮助。我猜是因为浏览器的缓存导致了这个问题。