Получить дочерние элементы родительского элемента после ngIf (Angular 5) - PullRequest
0 голосов
/ 07 июня 2018

Я пытаюсь получить все элементы input, которые существуют только после того, как логическое значение становится истинным.Таким образом, div обернуто вокруг *ngIf.Я попытался захватить элементы с помощью простого JavaScript, но он продолжает возвращаться пустым.Вот мой код:

test.component.html

<mat-checkbox (change)="toggleTest($event)">
    Test check box
</mat-checkbox>

<div class="form-area" *ngIf="isTestChecked">
    <input type="number">
    <input type="text">
</div>

test.component.ts

isTestChecked = false;

toggleTest(event: any) {
    this.isTestChecked = event.checked;

    if (this.isTestChecked === true) {
        const children = document.querySelectorAll('.form-area input');
        console.log(children);
    }
}

Таким образом, console.log всегда печатает пустой массив.Однако если я вручную ввожу селектор запросов в консоли браузера после установки логического значения в значение true, тогда он возвращает оба элемента input.

Что я делаю не так?Почему он не получит входные элементы после того, как они будут добавлены в DOM?Любая помощь будет оценена!

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Angular обновляет DOM асинхронно, поэтому вы не можете получить доступ к обновленным элементам DOM в том же цикле событий.Если вам действительно нужно манипулировать DOM напрямую, попробуйте добавить тайм-аут перед выбором запроса.

this.isTestChecked = event.checked;

setTimeout(() => {
    if (this.isTestChecked === true) {
        const children = document.querySelectorAll('.form-area input');
        console.log(children);
    }
})
0 голосов
/ 07 июня 2018

Не получайте доступ к DOM таким образом.Угловой способ использует ElementRef .

Также обратите внимание на те потоки, которые объясняют, как использовать: Angular 2 @ViewChild в * ngIf

private contentPlaceholder: ElementRef;
@ViewChild('contentPlaceholder') set content(content: ElementRef) {
   this.contentPlaceholder = content;
}

<div #contentPlaceholder *ngIf="isTestChecked">
    <input type="number">
    <input type="text">
</div>
...