Angular 6/Firestore Object Data will not Display in HTML

Question

I have a set of "article" documents stored in an "articles" collection in a Firestore no-SQL database. I am pulling these articles into an Angular 6 (^6.0.3) project using angularfire2 (^5.0.0-rc/10) and firebase (^5.0.4). The data is held in a service as observables and then pulled into various components and converted into objects when needed.

I am having a strange issue when I try to display properties of the object in HTML through interpolation and data binding. It simply does not show anything. I click an article tile from a menu, pass the article id as a string to my service, and then create an observable that points to the article with the corresponding id. I then subscribe to the observable in my component class and store the data as an object. The object prints fine on its own, but if I reference different properties it acts as if there is no data.

This is the code from the controller for my component:

article: any = {};
articleString: string;

selectArticle(articleId: string) {
            this.articlesService.getArticleObs(articleId).subscribe((data) => {
                this.article = data;
                this.articleString = JSON.stringify(this.article);
            });
        }

Which calls this function in the service:

getArticleObs(articleId: string) {
        console.log('article id sent to service: ' + articleId);
        this.articleDoc = this.db.doc(`articles/${articleId}`);
        return this.articleDoc.valueChanges();
    }

and should display here in the HTML:

<ng-template #article>
        <div class="article-body">
            <div fxLayout="row">
                <div class="article-image">
                    <img [src]="article?.game.image">
                </div>
                <div class="article-header" fxLayout="column">
                    <div>{{this.article?.title}}</div>
                    <h1>{{ article?.game?.title }} Review:</h1>
                    <div fxLayout="row">
                        <h2>Title:{{ article?.title }}</h2>
                        <h2>Author:{{ article?.author }}</h2>
                    </div>
                </div>
            </div>
            <div class="article-content" [innerHTML]="article?.content"></div>
            <div class="article-comments">
                Comments:{{ article?.comments }}
            </div>
        </div>
        <h3>{{ articleString }}</h3>
    </ng-template>

I can console.log(article) and get a complete object.

I also get a complete object showing on the screen with {{articleString}} but for any of the other interpolation or databinding there is no data.

Can anyone tell me why the HTML thinks that the object properties are empty strings?

UPDATE:

I just tried this in my controller:

selectArticle(articleId: string) {
            this.articlesService.getArticleObs(articleId).subscribe((data) => {
                this.article = data;
                console.log(1 + this.article);
                this.articleString = JSON.stringify(this.article);
                console.log(2 + this.article);
            });
            console.log(3 + this.article);
        }

The result in the console makes me think it is an async issue. The 3 prints first with an empty object. The 1 prints next with the complete object and then the 2, also with a complete object.

Michael Doye · Accepted Answer · 2018-06-28 08:46:26Z

4

+50

2 Things you can try (If you haven't already):

1) Use parenthesis (do the same for all your bindings):

<h1>{{ (article)?.game?.title }} Review:</h1>

2) Use the async pipe to unwrap the Observable, change your selectArticle method:

selectArticle(articleId: string) {
  // Don't subscribe here
  this.article = this.articlesService.getArticleObs(articleId);
}

In the template (do the same for all your bindings):

<h1>{{ (article | async)?.game?.title }} Review:</h1>

Sidenote: You also have a typo in your code, this line:

<div>{{this.article?.title}}</div>

should not be using this

<div>{{article?.title}}</div>

answered Jun 28, 2018 at 8:46

Michael Doye

8,2115 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Logan Kitchen Over a year ago

Thanks for pointing out the typo. I tried both suggestions and neither changed anything, but I think you are onto something with the async pipe. I don't understand that super well, but I did some more tests and I think that it may be the issue. I added the info to the question.

Michael Doye Over a year ago

can you try change article: any = {}; to article: Observable<any>; and try with the async pipe. See how they do it in the docs

Michael Doye Over a year ago

Here is a working demo based on your code: stackblitz.com/edit/angular-dzqva6

Logan Kitchen Over a year ago

Awesome! I mimicked the demo (step 2) and it worked perfectly. The issue was caused because I was missing the "$" at the end of my variable. I only got it to work with "article$". What is the "$" indicating and why do I need it?

Michael Doye Over a year ago

Thats quite strange because the $ symbol is just syntactic sugar commonly used denote that the property is an Observable.

|

Collectives™ on Stack Overflow

Angular 6/Firestore Object Data will not Display in HTML

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related