将数据渲染到离子视图,暂时为空

时间:2018-05-06 10:21:21

标签: angular ionic-framework ionic2 ionic3

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

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

我该如何解决这个问题。

下面是id代码。 home.ts

0

home.html的

    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); 
                    });
       }
   }

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

1 个答案:

答案 0 :(得分:1)

使用safe navigation operator ( ?. )
在访问对象的属性时,如果对象为null或未定义,则可能抛出异常。 Angular安全导航操作符(?.)是一种流畅且方便的方法,可以防止属性路径中的空值和未定义值。

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