我想在用户点击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();
}
}
答案 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")