Ionic应用页面首次加载数据不显示，二次点击才显示的问题求助

我来帮你排查下这个问题～ 从你的代码和描述来看，核心问题是页面首次加载时，barcodeTracker.data还没被填充完成，导致getScans()返回空数组；第二次点击菜单进入页面时，barcodeTracker里的数据已经准备好，所以能正常显示。

问题根源分析 #

• 页面构造函数在类实例化时就执行了，这时候barcodeTracker中的data可能还没从存储（NativeStorage/Storage）加载完成，同步调用getScans()自然拿不到数据。
• ionViewWillEnter里的赋值操作也是同步的，第一次进入页面时，barcodeTracker.data依然是空的，所以页面绑定的lastScans还是空数组。
• 第二次点击菜单时，barcodeTracker已经在之前的流程中完成了数据加载，这时候getScans()就能返回有效数据了。

具体解决方案 #

第一步：修改barcodeTracker的getScans为异步方法

确保数据加载完成后再返回，避免同步获取空数据：

public async getScans(){ 
  // 先判断data是否已加载，未加载则从存储中获取
  if (!this.data) {
    // 这里根据你实际的存储方式调整，比如用NativeStorage或Storage
    this.data = await this.storage.get('scannedData');
    // 如果是NativeStorage：this.data = await this.nativeStorage.getItem('scannedData');
  }
  console.log(this.data); 
  return this.data; 
}

第二步：在页面中异步获取数据，确保视图更新

把数据获取逻辑放到ionViewWillEnter中，用异步方式等待数据返回，同时如果遇到Angular变更检测不触发的情况，手动触发更新：

import { ChangeDetectorRef } from '@angular/core'; // 引入变更检测

export class ViewSessions { 
  lastScans = []; 

  constructor(
    private barcodeScanner: BarcodeScanner, 
    private nativeStorage: NativeStorage, 
    private barcodeTracker: BarcodeTracker, 
    private storage: Storage,
    private cdr: ChangeDetectorRef // 注入变更检测服务
  ) { 
    // 构造函数不做数据获取操作，此时依赖的资源可能未就绪
  } 

  async ionViewWillEnter(){ 
    this.lastScans = await this.barcodeTracker.getScans(); 
    // 手动触发变更检测，确保数据更新后视图同步刷新
    this.cdr.detectChanges();
  } 
}

第三步：检查HTML模板的绑定是否正确

确保模板中正确遍历lastScans数组，同时添加空状态提示提升体验：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let scan of lastScans">
      {{ scan.barcode }} <!-- 根据你的实际数据结构调整字段 -->
    </ion-item>
  </ion-list>
  <div *ngIf="lastScans.length === 0" class="empty-state">
    暂无扫描记录
  </div>
</ion-content>

额外优化：移除冗余代码

你在ionViewWillEnter中给barcodeTracker.lastScans赋值的代码是多余的，因为页面用的是自己的lastScans变量，建议删掉这行：

// 删掉这行，避免变量混淆
// this.barcodeTracker.lastScans = this.barcodeTracker.getScans(); 

这样调整后，页面每次进入都会等待barcodeTracker的数据加载完成，首次加载也能正常显示内容了。

内容的提问来源于stack exchange，提问作者sunnyj58