Javascript 第一次获取document.getElementById的空值单击按钮以显示进度条

我有一个进度条，在第二次点击按钮时工作正常。最初，进度条将被隐藏，只需单击它就会显示并开始进度。但这里的问题是第一次点击，它只显示进度条，并没有进展。Document.getElementById值第一次显示为空。第二次单击时，进度条正在工作。下面是代码

app.component.html

---

这是因为模板上的

*ngIf

。第一次单击时，模板中没有myBar id为的进度条。作为一种解决方法，您可以将

*ngIf=“showIt”

更改为类似

[style.visibility]=“showIt？visible'：“hidden”

---

在我的项目中，我还有一个div需要在单击后隐藏。您好，在这种情况下如何处理？

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="w3-light-grey" *ngIf="showIt">
  <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
</div>
<button  (click)="progressbar()">progress</button>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showIt: boolean = false;
  name = 'Angular';
  ngOnInit(): void {
    this.showIt = false;
  }
  progressbar() {
    this.showIt = true;
    var elem = document.getElementById('myBar');
    console.log(elem);
    var width = 20;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        if (elem != null) {
          elem.style.width = width + '%';
          elem.innerHTML = width * 1 + '%';
        }
      }
    }
  }
}