第二次打开时，离子视图不更新页面

Question

我正在使用离子2。我在离子2中面临很多问题。它首次工作正常。之后，它在控制台中打印数据。但不在屏幕上显示。

以及在终端中，当我对.ts，.html，.scss file.ts进行一些更改时。我需要关闭终端，再次需要进行ionic serve --lab ..所以是否有任何更改.ts文件为.js。如果是的，我需要更改新 .js文件中的任何内容。

谢谢Sathish

更新：

我有主屏幕，通过推动，我正在传递 cat id ，以根据我从家里传递的猫ID中的cat ID中的数据进行化为数据。html：

我的home.html

  <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)="showDetails(Catdata[i].CatID)">
     <ng-container *ngIf=" i % 2 === 0">
          <div class="col col-50 custom-design2" style="background: url(img url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{Catdata[i].CategoryName}}</span></div>
            </div>
            <div class="col col-50 custom-design2" style="background: url(img url) no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{Catdata[i+1].CategoryName}}</span></div>
             </div>

     </ng-container>
</div> 
   
</div>

我的家：

data: any;
 
   Catdata: any;
    constructor(   public alertCtrl: AlertController,
        public modalCtrl: ModalController,
        public navCtrl: NavController,
        public http:Http,
        public authService: AuthService) {
    this.submit();
      }
     submit() {     
     
        this.authService.categ(this.loginData).then((result) => {
        
          this.data = result;
    
           if(this.data.status == 1)
           {
           this.Catdata = this.data.CatgeoryList;
    
           
               for(let i=0; i<this.Catdata.length; i++) {
                   console.log(this.Catdata[i].CategoryName);
               }
    
           }
    
           else if(this.data.status == 0) {
    
         let alert = this.alertCtrl.create({
        title: 'Error',
        subTitle: 'Please Enter Valid Username & Password',
        buttons: ['OK']
      });
      alert.present();
           }
    
        }, (err) => {
        
        
        });     
      } 
    
    
    public showDetails(catId: any): void {
        this.navCtrl.push(SettingsPage, { clickedcatId: catId });
    
    
    }

我的设置.html：

<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()">
     <ng-container *ngIf=" i % 2 === 0">
          <div class="col col-50 custom-design2" style="background: url(img url) no-repeat center;background-size: cover;">
               <div class="custom-design1"><span class="grid-title">{{data[i].SubCategoryName}}</span></div>
            </div>
            <div class="col col-50 custom-design2" style="background: url(img url) no-repeat center;background-size: cover;">
                 <div class="custom-design1"><span class="grid-title">{{data[i+1].SubCategoryName}}</span></div>
             </div>

     </ng-container>
</div> 
   
</div>

我的settings.ts

 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) => {
        
        
        });     
    }

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

Answer 1

您的代码中的所有内容都很好，除了您忘了照顾生命周期事件 in Ionic

出了什么问题是，当您第一次加载页面时，它的构造函数被调用，并且此页面被缓存，下次构造函数并不称为构造函数，因此不是从服务器中获取数据并在应用程序上显示空页面。

这是更新的代码，您的 another()方法将始终被调用您在ionViewDidEnter()函数中调用后首次访问该页面如文档中提到的ionViewDidEnter()方法，并在生命周期事件部分中提到

ionviewDidenter : void Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

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() {
    }
}

和更新的设置.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中有奇数的项目时，因为5，它无法获取Catdata[5]，因为只有元素直到索引4。

。

如果您想在一行中2个项目，我建议您检查离子网格文档，这正是您要实现的目标。

这是完整的：src