I have a similar issue. I have a list screen that renders fine with its data.
<ion-content padding>
<ion-list>
<ion-item-sliding *ngFor="let blog of blogs; trackBy: trackId" #slidingItem>
<button ion-item (click)="detail(blog)">
<h2>{{blog.name}}</h2>
<p>{{blog.handle}}</p>
</button>
</ion-item-sliding>
</ion-list>
<ion-item *ngIf="!blogs?.length">
No Blogs found.
</ion-item>
</ion-content>
The detail method is pretty simple:
detail(blog: Blog) {
this.navCtrl.push('BlogDetailPage', {
blog: blog
});
}
The BlogDetailPage
simply renders the data thatās passed into it:
export class BlogDetailPage {
blog = {};
constructor(private modalCtrl: ModalController, private params: NavParams,
private blogService: BlogService, private toastCtrl: ToastController) {
this.blog = params.get('blog');
}
}
If I add a console.log()
in the constructor, the value is printed out correctly. However, the values donāt render in my page. Hereās the HTML for the page:
<ion-header>
<ion-navbar>
<ion-title>Blog</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>Name</ion-label>
<p>
<span>{{blog.name}}</span>
</p>
</ion-item>
<ion-item>
<ion-label>Handle</ion-label>
<p>
<span>{{blog.handle}}</span>
</p>
</ion-item>
<ion-item>
<ion-label>User</ion-label>
<p>{{blog.user?.login}}</p>
</ion-item>
</ion-list>
<button ion-button block (click)="open(blog)">{{ 'EDIT_BUTTON' | translate }}</button>
</ion-content>
If I add the following just before <ion-list>
, it renders:
{{ blog | json }}
Another strange thing that happens is if I change my detail HTML, ionic serve
reloads the page, but has none of my changes in it. TypeScript changes load fine, but it seems like lazy loading is preventing the HTML changes from being seen. If I restart ionic serve
, I do see my changes.
Iām using Ionic v3.19.0 and Node v8.9.1.