如何在不刷新頁面的情況下查看新條目？

-1

在我page.html使用ngIf，使用下面的代碼數據被提取從本地存儲：如何在不刷新頁面的情況下查看新條目？

<!-- 
    Generated template for the EducationPage page. 

    See http://ionicframework.com/docs/components/#navigation for more info on 
    Ionic pages and navigation. 
--> 
<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
    <ion-title>Education</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <ion-item> 
    <ion-input [(ngModel)]="newentry.title" type="text" placeholder="Title" [value]="title ? title: ''"> 
    </ion-input> 
    </ion-item> 
    <ion-item> 
    <ion-input [(ngModel)]="newentry.description" type="text" placeholder="Description"> 
    </ion-input> 
    </ion-item> 
    <ion-item> 
    <ion-input [(ngModel)]="newentry.tagline" type="text" placeholder="Tag line"> 
    </ion-input> 
    </ion-item> 
    <ion-item> 
    <ion-input [(ngModel)]="newentry.date" type="text" placeholder="Date"> 
    </ion-input> 
    </ion-item> 
    <button ion-button item-right> 
     <ion-icon name="md-add-circle" (click)="save(newentry);"></ion-icon> 
     <!-- <ion-icon name="md-add-circle" (click)="editmode ? save() : editedu(elem, index)"></ion-icon> --> 
     </button> 
    <ul id="elements"> 
    <li *ngFor="let elem of fetchdata; let index = index"> 
     {{elem.title}} {{elem.description}} 
     <button ion-button item-right (click)="editedu(elem,index);"> 
       <ion-icon name="open"></ion-icon> 
       </button> 
     <button ion-button item-right (click)="deleteedu(elem,index)"> 
        <ion-icon name="trash"></ion-icon>     
     </button> 
    </li> 
    </ul> 

</ion-content>

在此同一頁上我有一個表格來添加新的數據，但是當我添加和保存，我必須加載再次從菜單頁面查看輸入的新數據，該如何立即加載？

這是我的頁面的外觀 -

請指導

更新1，張貼我page.ts代碼：

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Education } from "./education"; 

/** 
* Generated class for the EducationPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 
//@IonicPage() 
@Component({ 
    selector: 'page-education', 
    templateUrl: 'education.html', 
}) 




export class EducationPage { 

    list: Array<number> = [1, 2, 3]; 
    //myArray = [{title:"saurabh" , description:"dd" , tagline:"tt", date:"dd"},{title:"gaurav" , description:"dd" , tagline:"tt", date:"dd"}]; 
    myArray = []; 
    number1 = 5; 
    newentry = { title: "", description: "", tagline: "", date: "", id: Math.random().toString(36).substr(2, 10) }; 
    data = ''; 
    fetchdata = []; 
    dataObj: Education[] = []; 
    elem = ''; 
    index; 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 



    ionViewDidLoad() { 
    console.log('ionViewDidLoad EducationPage'); 
    //console.log(this.list); 
    // console.log(this.myArray); 
    // localStorage.setItem("education-number",JSON.stringify(this.list)); 
    this.data = localStorage.getItem('education'); 
    if (!this.data) { 
     localStorage.setItem("education", JSON.stringify(this.myArray)); 
    } 
    this.fetchdata = JSON.parse(localStorage.getItem('education')); 
    console.log(this.fetchdata); 

    } 

    // updateeditmode(){ 
    // this.editmode=true; 
    // console.log(this.editmode); 
    // } 

    editedu(elem, index) { 
    // console.log(elem); 
    console.log("inside editedu::"); 
    this.newentry = elem; 
    this.newentry.title = elem.title; 
    // this.fetchdata.splice(index, 1); 
    //elem.title = 'CLICKED'; 
    console.log(this.fetchdata); 
    localStorage.setItem("education", JSON.stringify(this.fetchdata)); 
    } 

    deleteedu(elem, index) { 
    console.log(elem); 
    console.log(index); 
    this.fetchdata.splice(index, 1); 
    //elem.title = 'CLICKED'; 
    console.log(this.fetchdata); 
    localStorage.setItem("education", JSON.stringify(this.fetchdata)); 
    } 



    save(entry: Education) { 
    this.data = localStorage.getItem('education'); 
    console.log("save working"); 
    console.log(this.data); 
    if (this.data) //check if it exists or not empty 
    { 
     console.log("inside save function"); 
     this.dataObj = JSON.parse(this.data); //parse string 
     console.log(this.dataObj); 
     let filtered = this.dataObj.filter(t => t.id === entry.id); 
     if (filtered.length > 0) { 
     this.dataObj[this.dataObj.findIndex(eel=>eel.id === entry.id)] = entry; 
     } else { 
     this.dataObj.push(this.newentry); 
     } 
     console.log(this.dataObj); 
     localStorage.setItem("education", JSON.stringify(this.dataObj)); 
    } 



    console.log("inside save edit area"); 
    //this.editedu(this.elem,this.index); 
    } 

}

來源

2017-09-08 user2828442

發佈您的代碼。 –

html或ts文件？ – user2828442

「下面的代碼」不顯示關於localStorage的任何信息。什麼是「fetchdata」？ –