Angular 本地搜索-角度，在解析程序中从本地搜索获取数据之前加载UI

关于应用程序：Angular 7 PWA和LocalFlow

目标： 脱机时将数据从LocalFower呈现到html组件，如下所示

目前，我通过在线时使用LocalFound包（cdb）在（currentUser）中设置数据，离线时从LocalFound中获取数据，然后在html组件中呈现“currentUser”

问题是： 在将“currentUser”设置为LocalFound（I persume）中的数据之前呈现UI，因此返回错误“无法读取未定义的属性personalInformation”

当我在控制台上记录一次设置的数据时，我就得到了相关的数据

3个文件代码在页面下方， 如果有人有一个解决方案，可以在不返回未定义数据的情况下从LocalFower呈现数据，我会非常高兴

谢谢大家!

          <h1>Welcome to onefarm, {{ currentUser?.personalInformation.firstName }}!</h1>

import * as localforage from 'localforage';
import { Injectable } from '@angular/core';
const CryptoJS = require('crypto-js');

@Injectable({
  providedIn: 'root',
})
export class CDB {
  CryptoJS: any;
  static passphrase: '159o9647'; //not the real passphrase
  localforage: any;
  constructor() {
    localforage.config({
      name: 'App Storage',
    });
  }
  // Set object in storage
  static setItem(key: string, data: any, passphrase?: string): Promise<any> {
    if (passphrase) {
      console.log('Encrypting data');
      data = CryptoJS.AES.encrypt(JSON.stringify(data), passphrase).toString();
      console.log('Encrypted data');
    }
    return localforage.setItem(key, data);
  }

  static getItem(key: string, passphrase?: string): Promise<any> {
    return localforage.getItem(key).then((data: any) => {
      if (passphrase) {
        console.log('Data encrypted, decrypting');
        data = CryptoJS.AES.decrypt(data, passphrase);
        console.log('Decrypted data encoded');
        data = data.toString(CryptoJS.enc.Utf8);
        console.log('Decrypted data decoded');
        return JSON.parse(data);
      }
      return data;
    });
  }

  // Delete object from storage
  // tslint:disable-next-line: member-ordering
  static deleteItem(key: string): Promise<any> {
    return localforage.removeItem(key);
  }

  // Clear storage
  // tslint:disable-next-line: member-ordering
  static deleteAll(): Promise<any> {
    return localforage.clear();
  }
}

export class DashboardMainComponent implements OnInit {
  currentUser: User;

  constructor(
    private route: ActivatedRoute,
  ) {}
async ngOnInit() {
    if (navigator.onLine) {
      this.route.data.subscribe(({ currentUser }) => {
        this.currentUser = currentUser;
        CDB.setItem('currentUser', currentUser, CDB.passphrase);
      });
    } if (!navigator.onLine) {
      await CDB.getItem('currentUser', CDB.passphrase).then((data) => {
        this.currentUser = data;
      });
    }
  }```

CDB Is the localforage service