我试图通过id访问<ng-template>
中的元素,并且当loader是false
时,我显示<ng-template>
。因此,在subscribe
函数中,在loader变为false
后,my是变卦的,在subscribe方法本身中,我试图访问我的'gif-html',但得到的是null
<div class="my-loader" *ngIf="loader; else show_form_content">
<ngx-loading [show]="loader"></ngx-loading>
</div>
<ng-template #show_form_content>
<div class="gifTimer" id="gif-html">
</div>
</ng-template>
</div>
getMyData() {
this.loader = true;
this.myService
.getData()
.subscribe((response) => {
this.loader = false;
if (response.status === 'success') {
let gifHtml = document.getElementById('gif-html');
console.log('gifHtml', gifHtml)
}
});
}
ngOnInit(){
this.getMyData()
}
1条答案
按热度按时间n6lpvg4x1#
getElementById方法返回null,因为当您尝试访问ng-template内容时,它不会呈现在DOM中。
ng-template是一个结构化指令,不会立即呈现其内容。相反,它充当一个模板,可以使用 *ngIf或 *ngTemplateOutlet指令有条件地呈现。
超文本标记语言
我将id=“gif-html”模板引用变量添加到div元素中。
我希望这是帮助