Question

我试图获取在布尔值变为true后仅存在的所有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后，如何获得输入元素？任何帮助将不胜感激！

Answer 1

不要以这种方式访问DOM。 Angular方式使用ElementRef。

看看那些解释如何使用的线程： Angular 2 @ViewChild in *ngIf

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

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

Answer 2

Angular异步更新DOM，因此您无法在同一事件循环中访问更新的DOM元素。如果您确实需要直接操作DOM，请尝试在查询选择之前添加超时。

this.isTestChecked = event.checked;

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

在ngIf（Angular 5）之后获取父元素的子元素

2 个答案: