Angular 5 Contentful API in console but not view

Question

I'm trying to get a simple Contentful API going for my portfolio. I'm using Angular 5, Contentful and Firebase. I know I am retrieving the data successfully, because I can see it in the console, however, my view isn't getting it when I try to async pipe it in.

My service method:

My component using the method:

The data in the console:

The data in my view (that's not showing):

I think I'm not doing the promise correctly (I'm fairly new to Angular). The worst part is, I'm not getting any errors so I'm not sure what to debug!

Any advice?

Answer 1

You need to make a small change to your promise so that entries can be captured by subsequent promises. Make sure you return entries from your then():

getProjects() {
    const promise = this.client.getEntries({
        'content-type': 'project'
    })
    .then(function(entries) {

        entries.items.forEach(function(entry) {
            console.log(entry);
        });

        return entries; // make sure you return entries
    });

    return Observable.fromPromise(promise);
}

Also, in your template, it looks like you are trying to iterate over projects as opposed to projects.items. This fix requires a small modification to your template:

<div *ngFor="let project of projects.items">
    {{ project | json }}
</div>