Ionic 2 Angular 2 - 如何通过操作表刷新当前页面的数据?

时间:2017-07-29 12:37:02

标签: javascript angular ionic-framework ionic2

我想在用户点击handler的{​​{1}}后刷新当前页面的数据。目的是刷新当前页面并替换为新数据。虽然ActionSheet虽然但并非认为适用于此案例。

我已经成功获取了我想要的数据,但我不知道如何刷新页面并显示新数据。

感谢任何帮助和建议。在此先感谢:)

list.html

ionViewWillEnter(){}

list.ts

<div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div> 
 <ion-fab right bottom #fab>
 <button ion-fab (click)="openFabButton()">
  <ion-icon name="md-funnel" ></ion-icon>
 </button>
 <ion-fab-list side="top">  
  <ion-label class="menuFiltCat">
 <p class="menuFilt">Type</p>
 </ion-label>

 <button (click)='openActSheet()' ion-fab>
    <ion-icon name="md-list" ></ion-icon>
  </button>

 </ion-fab-list>
</ion-fab>
<!--Initial Data-->
  <ion-list >

  <ion-item *ngFor="let listing of maps.data">
  <h2>{{ listing.ListTitle }}</h2>
  <p>{{ listing.ListType }}</p>
  <ion-note item-end>  
  <p><button (click)="viewEntry({ record: listing })" ion-button color="danger">Click</button></p>
  </ion-note>
  </ion-item>

  </ion-list> 

GoogleMap提供商

import { IonicPage, NavController, NavParams, ModalController, ViewController } from 'ionic-angular';
import { Component } from '@angular/core';
import { ActionSheetController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { GoogleMapsProvider } from '../../providers/google-maps/google-maps';

@IonicPage()
@Component({
selector: 'page-list',
templateUrl: 'list.html',
})
export class ListPage {
fabButtonOpened: Boolean;
results: any;
data :any;

constructor(
public viewCtrl: ViewController,
public navCtrl: NavController, 
public actionSheetCtrl: ActionSheetController,
public modalCtrl: ModalController,
public http: Http,
public maps: GoogleMapsProvider,
public navParams: NavParams,
) {
   this.fabButtonOpened=false;
}

 getData(type){

 this.http.get('http://localhost/getType.php?type=' + type)
  .map(res => res.json())
  .subscribe(data => {

    let typeData = data;
    console.log(typeData);

 });

}

openFabButton(){
      if(this.fabButtonOpened==false){
          this.fabButtonOpened=true;
      }else{
          this.fabButtonOpened=false;
      }
    }

 openActSheet(){

    let actionsheet = this.actionSheetCtrl.create({

    title:"Type",
    buttons:[
    {
    text: 'Hour',
    handler: () => {

              let Hourly = "Hourly";

              let results = this.getData(Hourly);
              console.log(results);//[object] {listID:1,listType:Hourly,listDescription,listTitle}

              //Looking for some Function to replace/refresh the old data with new data

    }
    },
{
 text: 'Day',
 handler: () => {
 let Daily = "Daily";
 this.getData(Daily);

 }
},
{
text: 'Week',
handler: () => {
let Weekly = "Weekly";
this.getData(Weekly);

 }
},
{
 text: 'Month',
 handler: () => {
 let Monthly = "Monthly";
 this.getData(Monthly);

 }
}
]
});
 actionsheetjob_type.present();
}

}

1 个答案:

答案 0 :(得分:1)

以下是显示API调用数据所需的内容:

// On list.ts

getData(type){
  this.http.get('http://localhost/getType.php?type=' + type)
    .map(res => res.json())
    .subscribe(data => {

    this.data = data;
  });
}

// On list.html

<ion-list>
  <ion-item *ngFor="let listing of data">
    <h2>{{ listing.ListTitle }}</h2>
    <p>{{ listing.ListType }}</p>
    <ion-note item-end>  
      <p>
        <button (click)="viewEntry({ record: listing })" ion-button color="danger">Click</button>
      </p>
    </ion-note>
  </ion-item>
</ion-list> 

然后,您需要对ActionSheet处理程序执行的操作是调用this.getData("type")