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 会通知您，值刚刚被评估 - 在您点击它的那一刻。