Unable to access the response in html file

Ionic Framework ionic-v3
21

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.

22

I was able to solve this by adding an item-content to my value elements. For example:

<ion-list>
    <ion-item>
        <ion-label>Name</ion-label>
        <div item-content>
            <span>{{blog.name}}</span>
        </div>
    </ion-item>
    <ion-item>
        <ion-label>Handle</ion-label>
        <div item-content>
            <span>{{blog.handle}}</span>
        </div>
    </ion-item>
    <ion-item>
        <ion-label>User</ion-label>
        <div item-content>{{blog.user?.login}}</div>
    </ion-item>
</ion-list>

FWIW, I found the solution on Stack Overflow: https://stackoverflow.com/a/44454176/65681.