首页 文章

@ViewChild始终返回undefined

提问于
浏览 次
8

我知道之前已经问过这个问题，但是没有一个选定的答案对我有用 .

我正在尝试使用@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);
        }
}

我在这里失踪了什么？

更新：哦，我的灵魂！我想出了为什么这不应该工作时...我将整个视图包含在带有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
angular

1 回答

  • 8

    @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)
        }
    })
 }
    回复于

相关问题