ngIf 具有角度 15

Question

我正在使用 Angular 15 开发一个 Web 应用程序。我正在使用反应式表单。我想在检索数据时显示 div，并在成功检索数据时隐藏它。我正在使用

*ngIf="isLoading"

。 isLoading是组件ts文件中定义的变量。

我将

this.isLoading=true

设置为 ngOnInit() 中的第一个语句，并在 HttpGet Subscribe() 方法（数据检索后）中将其设置为

this.isLoading=false

，也在 ngOnInit() 中。

当我导航到此页面时，可以看到一个空白表单。 带有加载文本的 div 未加载。如果我在第

this.isLoading=false

行的 subscribe 方法中设置断点，则 div 在执行此行之前加载 just，并在执行此行后立即消失。 （换句话说，如果代码在没有断点的情况下运行，则 div 永远不可见。）

还有其他人经历过这种行为吗？解决方案/解决方法是什么？非常感谢您的专家意见。谢谢！

Answer 1

一个观察结果是，如果我注释掉 html 中的表单，则当用户导航到该页面时，div 会显示，并且一旦使用 HttpGet 从 api 检索数据，div 就会消失，正如预期的那样。

HTML

   <!--
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
    ...
    ...
    ...
    </form>
    -->
      <div *ngIf="isLoading" id="divLoading" style="display:flex; justify-content: center; align-items: center; height:100%">
        <div style="width:200px; z-index: 2;">
          <label style="font-size: x-large;">&nbsp;&nbsp;Loading&nbsp;<i class="fa-solid fa-ellipsis fa-fade fa-2xl"></i></label>
        </div>
      </div>

CSS

#divLoading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 625px;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

  #divLoading input {
    background-color: gray;
  }