Angular 6 / FirestoreオブジェクトデータはHTMLで表示されません

Firestoreのno-SQLデータベースの「articles」コレクションに一連の「article」ドキュメントが保存されています。これらの記事を、angularfire2（^ 5.0.0-rc / 10）とfirebase（^ 5.0.4）を使用してAngular 6（^ 6.0.3）プロジェクトにプルしています。データはオブザーバブルとしてサービスに保持され、さまざまなコンポーネントに取り込まれ、必要に応じてオブジェクトに変換されます。

補間とデータバインディングを使用してオブジェクトのプロパティをHTMLで表示しようとすると、奇妙な問題が発生します。単に何も表示されません。メニューから記事タイルをクリックし、記事IDを文字列としてサービスに渡してから、対応するIDを持つ記事を指すオブザーバブルを作成します。次に、コンポーネントクラスのobservableをサブスクライブし、データをオブジェクトとして保存します。オブジェクトはそれ自体で正常に印刷されますが、異なるプロパティを参照すると、データがないかのように機能します。

これは私のコンポーネントのコントローラーからのコードです：

article: any = {};
articleString: string;

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

サービスでこの関数を呼び出すもの：

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

ここに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>

console.log（article）を実行して、完全なオブジェクトを取得できます。

また、{{articleString}}を使用して画面に完全なオブジェクトが表示されますが、他の補間またはデータバインディングの場合はデータがありません。

HTMLがオブジェクトのプロパティが空の文字列であると考える理由を誰かに教えてもらえますか？

更新：

私はコントローラーでこれを試しました：

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

コンソールでの結果は、それが非同期の問題であると私に思わせます。3は、最初に空のオブジェクトで印刷します。1は次に完全なオブジェクトで印刷し、次に2も完全なオブジェクトで印刷します。