Ionic3-ElementRef nativeElement.getElementsByClassName返回集合，但无法访问

Question

我正在遵循有关离子和指令的tutorial，并且一切正常，除非我尝试使用ElementRef的nativeElement.getElementsByClassName来获取FAB元素，例如：

this.fab = this.element.nativeElement.getElementsByClassName('fab')[0]

返回undefined。问题是当我删除索引并使用console.log打印整个HTMLCollection时，它向我显示了一个完整列表，其中所有FAB位于该元素内。

运行

console.log(this.element.nativeElement.getElementsByClassName('fab'),
        this.element.nativeElement.getElementsByClassName('fab')[0]);

ngOnInit上的

得到以下结果：

我在这里做错了什么？与该问题相关的代码的每一部分都与该教程相同，并且是一个非常新的视频...

Answer 1

我认为这里的原因是当您用该行要求它们时这些元素不存在：

console.log(this.element.nativeElement.getElementsByClassName('fab'),
        this.element.nativeElement.getElementsByClassName('fab')[0]);

有一个简单的示例显示了问题所在：

    console.log(document.getElementsByClassName('fab'), document.getElementsByClassName('fab')[0]);

    const el1 = document.createElement('div');
    el1.setAttribute('class', 'fab');

    const el2 = document.createElement('div');
    el2.setAttribute('class', 'fab');

    setTimeout(() => {
        this.abc.nativeElement.appendChild(el1);
        this.abc.nativeElement.appendChild(el2);
    }, 2000);

2秒后添加元素，并且控制台日志与您的相同，但是当您单击HTMLCollection时，它将评估并显示这些元素-当然，如果您在2秒后单击（当存在元素时）

如果这些元素在您询问时确实存在，则控制台日志应类似于：

HTMLCollection(2) [div.fab, div.fab]

此外，请注意，在Google Chrome控制台中，这小小的 i 会通知您，当您单击值时，值才刚刚被评估。