时间戳

首页 > 解决方案 > 当 ngOnInit() 中未获取数据时，页面相互加载

angular - 当 ngOnInit() 中未获取数据时，页面相互加载

问题描述

从放置 app.componment 的侧边菜单路由到页面时出现异常行为。当页面加载数据时，在 ngOnInit() 中从远程服务器调用

 ngOnInit() {
    // Fecth data using service, retuns only oe row so departmentTransfion mut be type any and not array[]
    this.searching= true;
    this.service.getDepartment('Transfusion').subscribe(data => {
      this.departmentTransfusion = data;
      this.searching = false;
    })
  }

我的 page.html 中引用了数据：

  <ion-row  style="padding-left: 4px;">
    <ion-col>
      <h3>General Infomration <ion-icon name="information-circle-outline"></ion-icon></h3>
      
      <p class="preference-value">
        {{departmentHaematology.general}}
      </p>
      <h4 class="preference-name">Opening hours <ion-icon name="hourglass-outline"></ion-icon> </h4>
      <p class="preference-value">
        
       {{departmentHaematology.openingHours}}
      </p>
    </ion-col>

当 Web 控制台中出现错误时，从侧面菜单路由时，页面似乎相互重叠：

类型错误：未定义不是对象（评估'ctx.departmentHaeamtology.general'

网页浏览器中重叠的页面：

页面重叠

所以我的问题是，重叠视图可能是由于在呈现视图之前未在 ngOnIt() 中加载数据吗？我的理解是在 ngOnInit() 执行之前视图不会呈现，因此这种方法非常适合从远程服务器下载数据。

Qoute 形成有关生命周期的角度文档：

ngOnInit() 是组件获取其初始数据的好地方。

那么这种不寻常的重叠渲染是否是由于在视图渲染之前未捕获数据？如果是这样，那么我们应该使用生命周期的哪一部分在视图呈现之前从远程服务器捕获数据？

解决方案：

使用角度ngIf else显示离子旋转器，直到加载数据。这解决了页面的异常渲染。

<!--Seraching spinner-->
        <div *ngIf="searching; else elseBlock">
          <ion-spinner class="spinner-container" name="bubbles" color="dark"></ion-spinner>
        </div>

        <ng-template #elseBlock>

标签： angularionic-frameworkview

解决方案

你的问题是完全正常的。问题是 HTTP 请求是异步的，它可能需要……例如 0.2 秒才能完成（取决于服务器、连接等）。

与在构造函数或 ngOnInit 中发出请求无关，视图将在对服务器的请求完成之前显示。稍后，请求将完成，然后您设置变量值并刷新视图。

您的问题是视图第一次呈现时，对服务器的请求尚未完成，因此 departmentHaeamtology 为空（空）。您的 HTML 正在尝试访问 null 变量的“常规”属性，这就是发生错误的原因。

该问题的解决方案是将 *ngIf="departmentHaeamtology" 添加到页面容器中。然后，在变量有值之前，视图不会显示。那么问题是在请求完成之前您将获得一个空白页面。它可能很快，但无论如何你都会看到“弹出”效果。一个解决方案是用 CSS 添加一个加载圈。

关于您的页面表现得很奇怪，这可能是由于错误造成的。当 HTML 文件中有错误时，ionic 会产生奇怪的东西。试试我的解决方案并检查。

推荐阅读