如何在不刷新页面的情况下查看新条目？

Question

在我使用 ngIf 的 page.html 中，使用以下代码从本地存储中获取数据：

<!--
  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>

在同一页面上我有一个表单来添加新数据，但是当我添加和保存时，我必须再次从菜单加载页面才能看到输入的新数据，如何立即加载？

这是我的页面的外观：

更新

发布我的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);
  }

}

Answer 1

尝试以下方法之一：

ApplicationRef.tick() - 类似于 Angular 1 的 $rootScope.$digest() - 即，检查完整的组件树

ChangeDetectorRef.detectChanges() - 类似于 $scope.$digest() -- 即，仅检查此组件及其子组件

在通过 subscribe 方法更新数据后，使用其中一种方法来更新视图以进行新的更改。