Typescript 第二次打开时，Ionic视图未更新页面

我正在使用离子2。我在离子2中面临很多问题。当我导航时，按以显示数据。第一次，它工作得很好。然后在控制台中打印数据。但不显示在屏幕上

在终端中，当我在.ts、.html、.scss文件中做一些更改时，它不会更新。我需要关闭我的终端，再次我需要做离子服务-实验室。。那么，是否将.ts文件更改为.js呢。如果是的话，我需要修改新的.js文件中的语法吗

谢谢， 萨提斯

更新： 我有主屏幕，通过推送，我正在传递cat id，以根据我从home.html传递的cat id在my settings.html中生成数据：

我的家.html

我的authservice.ts

这很好：

categ(cat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'categories.php', JSON.stringify(cat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

   subcatte(subcat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'subcategory.php', JSON.stringify(subcat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }
  

---

您的代码中的所有内容都很好，只是您忘记在ionic中处理生命周期事件

出错的是，当您第一次加载页面时，它的构造函数被调用，而此页面被缓存，下一次不调用构造函数，因此不会从服务器获取数据，并在应用程序上显示空页面

以下是更新后的代码，在该代码中，您的另一个方法将始终被调用，无论您是第一次访问该页面，还是在IonViewDiCenter函数中调用该页面后未被调用 正如文档中提到的和生命周期事件部分中提到的IonViewDiCenter方法

IonViewDiCenter:void在页面完全进入并且现在是活动页面时运行。无论是第一次加载还是缓存页面，都将触发此事件

下面是更新的settings.ts代码，加载程序显示从服务器获取数据之前的情况：

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { AlertController, ModalController, NavParams, LoadingController } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../../providers/AuthService';

@Component({
    selector: 'page-settings',
    templateUrl: 'settings.html'
})
export class SettingsPage {

    data: any;
    responsedata: any;
    Catdata: any = null;
    Catdatanames: any;
    categoryid: any;
    subcatdata: any;



    constructor(public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http: Http,
        public authService: AuthService, private navParams: NavParams,
        public loadingCtrl: LoadingController) {
    }

    ionViewDidEnter() {
        this.categoryid = this.navParams.get('clickedcatId');
        console.log(this.categoryid);
        this.presentLoadingText();
    }

    presentLoadingText() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: 'Please Wait...'
        });

        loading.present();
        this.another(loading);
    }

    another(loading) {

        this.subcatdata = { CatID: this.categoryid };

        this.authService.subcatte(this.subcatdata).then((result) => {

            this.data = result;

            console.log(this.data);

            if (this.data.status == 1) {
                this.Catdata = this.data.SubCatgeoryList;


                for (let i = 0; i < this.Catdata.length; i++) {
                    console.log(this.Catdata[i].SubCategoryName);
                }
            }

            else if (this.data.status == 0) {

                let alert = this.alertCtrl.create({
                    title: 'Error',
                    subTitle: 'Please Enter Valid Username & Password',
                    buttons: ['OK']
                });
                alert.present();
            }
            loading.dismiss();            

        }, (err) => {
            loading.dismiss();
        });
    }
    opndetailpage() {

    }

}

和更新的settings.html页面

    <ion-header>
  <ion-navbar color="navcolr" no-border-bottom>

  <!--   <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button> -->

    <ion-title>sub category</ion-title>
  <!--       <ion-buttons end>
      <button ion-button icon-only (click)="presentFilter()">
        <ion-icon ios="ios-options-outline" md="md-options"></ion-icon>
      </button>
    </ion-buttons> -->

  </ion-navbar>
</ion-header>

<ion-content style="width: 100%;overflow-y: hidden;">

<!-- <div style="
    margin-top: 3%;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px #696969 solid;
    padding-left: 5%;
    padding-bottom: 3%;">
  <label>Resources</label>

</div>  -->

<p>
  This is sub cat
</p>

<div class="item item-body no-padding" style="border-width: 0px !important;">  

  <div class="row no-padding" *ngFor="let data of Catdata; let i = index" (click)="opndetailpage()">

          <div class="col col-50 custom-design2" style="background: url(Your_URL) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{Catdata[i].SubCategoryName}}</span></div>
            </div>
</div> 


</div>

<p>
  This is subjetcs
</p>

</ion-content>

请注意，我已经删除了其他div元素，因为在您的示例中，当Catdata中的项目数为奇数时，它将无法获取Catdata[5]，因为在索引4之前只有元素

如果你想在一行中有两个项目，我建议你检查一下你想要达到的目标

---

以下是完整的：

我可以将ionic2.ts文件更改为.js no。。爱奥尼亚2只适用于typescript。当我做一些更改时，它不会更新。。这是另一个问题。ionic会在您对任何文件进行更改后立即自动更新视图，这可能是因为您正在更改文件并保存，然后在生成以前的保存状态之前再次更改文件并保存。要克服这一点，您可能需要尝试只放置空行并保存，然后让它构建application@suraj我发布了我的完整代码。我做错了什么。真的是过去两天。我没能得到那份工作solution@warl0ck我发布了我的完整代码。我做错了什么。真的是过去两天。我无法获得解决方案。你能告诉我它什么时候没有更新数据/UI吗？当它还在构建应用程序时，你做了更改并保存了吗？哦，我真的很困惑加载。给我一分钟。我会发布我正在做的事情的确切代码。现在请查看我的帖子。我发布了我在项目中使用的真实代码。我已经像你说的那样改变了。但只有同样的错误。或者我又漏掉了一些东西或者什么？现在很清楚了。请告诉我我做错了什么。现在更清楚了，只是为了确认你里面的代码工作不正常？我把两个列放在一行中。这也不起作用。当我第一次推送导航时，更多。在“我的设置”页面中显示数据。同时，当我再次这样做时，它不会显示数据

 data: any;
 
   Catdata: any;

    constructor( public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http:Http,
        public authService: AuthService,private navParams: NavParams) {
    
        this.categoryid = navParams.get('clickedcatId');
        console.log(this.categoryid);
    
    this.another();
    
    
      }
    
      another() {
    
       this.subcatdata = { CatID:this.categoryid};
      
      this.authService.subcatte(this.subcatdata).then((result) => {
        
          this.data = result;
    
          console.log (this.data);
    
           if(this.data.status == 1)
           {
           this.Catdata = this.data.SubCatgeoryList;
    
           
               for(let i=0; i<this.Catdata.length; i++) {
                   console.log(this.Catdata[i].SubCategoryName);
               }
    
           }
    
           else if(this.data.status == 0) {
    
         let alert = this.alertCtrl.create({
        title: 'Error',
        subTitle: 'Please Enter Valid Username & Password',
        buttons: ['OK']
      });
      alert.present();
           }
    
        }, (err) => {
        
        
        });     
    }

categ(cat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'categories.php', JSON.stringify(cat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }

   subcatte(subcat: any) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.http.post(apiUrl+'subcategory.php', JSON.stringify(subcat), {headers: headers})
          .subscribe(res => {
            resolve(res.json());
          }, (err) => {
            reject(err);
          });
    });
  }
  

data: any;

Catdata: any;

constructor(public alertCtrl: AlertController,
    public modalCtrl: ModalController,
    public navCtrl: NavController,
    public http:Http,
    public authService: AuthService, private navParams: NavParams) {

    this.categoryid = navParams.get('clickedcatId');
    console.log(this.categoryid);
}

ionViewDidEnter() {
    this.another();
}

another() {

    this.subcatdata = { CatID: this.categoryid };

    this.authService.subcatte(this.subcatdata).then((result) => {

        this.data = result;

        console.log(this.data);

        if (this.data.status == 1) {
            this.Catdata = this.data.SubCatgeoryList;


            for (let i = 0; i < this.Catdata.length; i++) {
                console.log(this.Catdata[i].SubCategoryName);
            }

        }

        else if (this.data.status == 0) {

            let alert = this.alertCtrl.create({
                title: 'Error',
                subTitle: 'Please Enter Valid Username & Password',
                buttons: ['OK']
            });
            alert.present();
        }

    }, (err) => {


    });
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { AlertController, ModalController, NavParams, LoadingController } from 'ionic-angular';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../../providers/AuthService';

@Component({
    selector: 'page-settings',
    templateUrl: 'settings.html'
})
export class SettingsPage {

    data: any;
    responsedata: any;
    Catdata: any = null;
    Catdatanames: any;
    categoryid: any;
    subcatdata: any;



    constructor(public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http: Http,
        public authService: AuthService, private navParams: NavParams,
        public loadingCtrl: LoadingController) {
    }

    ionViewDidEnter() {
        this.categoryid = this.navParams.get('clickedcatId');
        console.log(this.categoryid);
        this.presentLoadingText();
    }

    presentLoadingText() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: 'Please Wait...'
        });

        loading.present();
        this.another(loading);
    }

    another(loading) {

        this.subcatdata = { CatID: this.categoryid };

        this.authService.subcatte(this.subcatdata).then((result) => {

            this.data = result;

            console.log(this.data);

            if (this.data.status == 1) {
                this.Catdata = this.data.SubCatgeoryList;


                for (let i = 0; i < this.Catdata.length; i++) {
                    console.log(this.Catdata[i].SubCategoryName);
                }
            }

            else if (this.data.status == 0) {

                let alert = this.alertCtrl.create({
                    title: 'Error',
                    subTitle: 'Please Enter Valid Username & Password',
                    buttons: ['OK']
                });
                alert.present();
            }
            loading.dismiss();            

        }, (err) => {
            loading.dismiss();
        });
    }
    opndetailpage() {

    }

}

    <ion-header>
  <ion-navbar color="navcolr" no-border-bottom>

  <!--   <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button> -->

    <ion-title>sub category</ion-title>
  <!--       <ion-buttons end>
      <button ion-button icon-only (click)="presentFilter()">
        <ion-icon ios="ios-options-outline" md="md-options"></ion-icon>
      </button>
    </ion-buttons> -->

  </ion-navbar>
</ion-header>

<ion-content style="width: 100%;overflow-y: hidden;">

<!-- <div style="
    margin-top: 3%;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px #696969 solid;
    padding-left: 5%;
    padding-bottom: 3%;">
  <label>Resources</label>

</div>  -->

<p>
  This is sub cat
</p>

<div class="item item-body no-padding" style="border-width: 0px !important;">  

  <div class="row no-padding" *ngFor="let data of Catdata; let i = index" (click)="opndetailpage()">

          <div class="col col-50 custom-design2" style="background: url(Your_URL) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{Catdata[i].SubCategoryName}}</span></div>
            </div>
</div> 


</div>

<p>
  This is subjetcs
</p>

</ion-content>