Рендеринг данных в ионное представление, которое на мгновение является нулевым - PullRequest
Новая
       7

Рендеринг данных в ионное представление, которое на мгновение является нулевым

0 голосов
/ 06 мая 2018

Загружаю данные из indexedDB с помощью dexie в переменную info.

проблема в том, что информационная переменная пуста некоторое время. это делает его не отображаемым в представлении.

как мне решить проблему.

ниже id кода. home.ts 

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

home.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>`

вид отображает имя и фамилию после перехода на другую страницу и возврата на домашнюю страницу. я хочу, чтобы страница отображала имена сразу после загрузки

1 Ответ

0 голосов
/ 06 мая 2018

использовать оператор безопасной навигации (?.)
При доступе к свойствам объекта он может вызвать исключение, если объект нулевой или неопределенный. Оператор угловой безопасности (?.) - это удобный и удобный способ защиты от нулевых и неопределенных значений в путях свойств. 

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