javascript 如何访问< ng-template>

f3temu5u 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(101)

我试图通过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()
}

JavaScript

来源：https://stackoverflow.com/questions/76227063/how-to-access-element-of-ng-template

1条答案

按热度按时间

n6lpvg4x1#

getElementById方法返回null，因为当您尝试访问ng-template内容时，它不会呈现在DOM中。
ng-template是一个结构化指令，不会立即呈现其内容。相反，它充当一个模板，可以使用 *ngIf或 *ngTemplateOutlet指令有条件地呈现。

超文本标记语言

<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);
            }
        });
    }
}

我希望这是帮助

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何访问< ng-template>

1条答案

相关问题

热门标签

最新问答