Ionic3 - ElementRef nativeElement.getElementsByClassName возвращает коллекцию, но она недоступна

Question

Я следую этому учебнику об Ionic и директивах, и все работает отлично, за исключением случаев, когда я пытаюсь получить элемент FAB с помощью nativeElement.getElementsByClassName элемента ElementRef, например:

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

Это возвращает undefined.Проблема в том, что когда я удаляю индекс и печатаю всю коллекцию HTMLCollection, используя console.log, он показывает мне полный список со всеми FAB внутри элемента.

Запуск

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

on 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]

Также обратите внимание, что этот маленький i в консоли Google Chrome сообщаетВам это значение оценивается только сейчас - в тот момент, когда вы нажимаете на него.