将数据呈现为暂时为空的离子视图

Question

我使用dexie将数据从indexedDB加载到info变量中。

问题是 info 变量有点为空。 这使得它不会在视图中呈现。

我该如何解决问题。

在 id 下面代码。 首页

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular';
import {MyDb} from '../../app/service/core.db';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
info : any;
constructor(public navCtrl: NavController, private myDb : MyDb) 
{
}
ionViewWillEnter()
{
let rec = {first: "Tom", last: "Otasdfile", age : "12"};
this.myDb.save_contact(rec).then(res => 
{
//console.log(res);
});
this.myDb.get_contact().toArray(
data => { 
this.info = data;
console.log(this.info); 
});
}
}

首页.html

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor = "let i of info">
{{i.first}} {{i.last}}
</ion-item>
</ion-list>
</ion-content>`

视图在导航到另一个页面并返回主页后显示名字和姓氏。 我希望页面在加载后立即呈现名称

Answer 1

使用安全导航运算符 ( ？. (
在访问对象的属性时，如果对象为 null 或未定义，则可能会引发异常。Angular 安全导航运算符(?.)是一种流畅而方便的方法，用于防止属性路径中的空值和未定义值。

<ion-content padding>
<ion-list>
<ion-item *ngFor = "let i of info">
{{i?.first}} {{i?.last}}
</ion-item>
</ion-list>
</ion-content>`