Question

我正在写一个显示数据的页面。我创建了一个用于获取api上最新数据的按钮。但是当我点击按钮时，页面视图没有改变。代码：

import { PoschoosePage } from './../poschoose/poschoose';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import request from 'request';

@IonicPage()
@Component({
   selector: 'page-park-choose',
  templateUrl: 'park-choose.html',
})
export class ParkChoosePage {
  carpark_Data = JSON.parse(localStorage.getItem("Park_Choose_Data"))

 constructor(public navCtrl: NavController, public navParams: NavParams, public change: ChangeDetectorRef) {
  }

 ionViewDidLoad() {
 console.log('ionViewDidLoad ParkChoosePage');
 }

update(){
let list_carpark_url = (the api link)
request.get(list_carpark_url, (error, response, body) => {
  let carpark_Data = body
  localStorage.setItem("Park_Choose_Data", carpark_Data)
  console.log(body)
});
}

}

html文件：

<ion-content>
  <button ion-button (click)="update()">update</button>
   <ion-card *ngFor="let carpark of carpark_Data; let i = index">
  <ion-item>
    <ion-icon name="map" item-start large></ion-icon>
    <h2>{{carpark.park_name}}</h2>
    <p>{{carpark.park_address}}</p>
  </ion-item>
  </ion-card>
  </ion-content>

Answer 1

更新update方法

update(){
    let list_carpark_url = (the api link)
    request.get(list_carpark_url, (error, response, body) => {
      let carpark_Data = body
      localStorage.setItem("Park_Choose_Data", carpark_Data)
      this.navCtrl.setRoot(this.navCtrl.getActive().component)
    });
}

ionic3当变量中的数据发生变化时如何重新加载页面

1 个答案: