英文:
How to access element of <ng-template>
问题
我正在尝试通过ID访问位于<ng-template>内部的元素，并在加载器为false时显示<ng-template>。因此，在订阅函数中，在加载器变为false后，我的<ng-template>被渲染，在订阅方法本身中，我试图访问我的'gif-html'，但我得到了null。
英文:
I am trying to access element by id which is inside the <ng-template> and I am showing that <ng-template> when loader is false. So in subscribe function after loader becomes false my <ng-template> is renedering, and in subscribe method itself I am trying to access my 'gif-html' but I am getting it 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
得分: 1
getElementById方法返回null是因为当你尝试访问时，ng-template的内容尚未在DOM中呈现。
ng-template是一个结构性指令，它不会立即呈现其内容。相反，它作为一个模板，可以通过ngIf或ngTemplateOutlet指令进行条件性渲染。
HTML
<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>
我将id="gif-html"添加到了div元素中作为模板引用变量。
import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
export class YourComponent {
@ViewChild('gif-html', { static: false }) gifHtmlRef!: ElementRef;
ngAfterViewInit() {
this.getMyData();
}
getMyData() {
this.loader = true;
this.myService
.getData()
.subscribe((response) => {
this.loader = false;
if (response.status === 'success') {
console.log('gifHtml', this.gifHtmlRef.nativeElement);
}
});
}
}
我希望这对你有所帮助。
英文:
getElementById method is returning null because the ng-template content is not rendered in the DOM when you're trying to access it.
The ng-template is a structural directive that doesn't render its content immediately. Instead, it serves as a template that can be rendered conditionally using the *ngIf or *ngTemplateOutlet directives.
HTML
<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>
I added the id="gif-html" template reference variable to the div element.
import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';
export class YourComponent {
@ViewChild('gif-html', { static: false }) gifHtmlRef!: ElementRef;
ngAfterViewInit() {
this.getMyData();
}
getMyData() {
this.loader = true;
this.myService
.getData()
.subscribe((response) => {
this.loader = false;
if (response.status === 'success') {
console.log('gifHtml', this.gifHtmlRef.nativeElement);
}
});
}
}
i hope it's help
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论