Angular 6/Firestore对象数据将不会显示在HTML中

我有一组“article”文档存储在Firestore no SQL数据库中的“articles”集合中。我正在使用angularfire2（^5.0.0-rc/10）和firebase（^5.0.4）将这些文章放入AngularFire6（^6.0.3）项目中。数据作为可观察数据保存在服务中，然后拉入各种组件，并在需要时转换为对象

当我试图通过插值和数据绑定在HTML中显示对象的属性时，我遇到了一个奇怪的问题。它根本没有显示任何东西。 我从菜单中单击一个文章平铺，将文章id作为字符串传递给我的服务，然后创建一个指向具有相应id的文章的可观察对象。然后在我的组件类中订阅该可观察对象，并将数据存储为对象。对象本身可以很好地打印，但是如果我引用不同的属性，它的行为就好像没有数据一样

这是我的组件控制器的代码：

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>

控制台中的结果使我认为这是一个异步问题。3首先打印一个空对象。1接着打印完整对象，然后打印2，也打印完整对象。

2件您可以尝试的事情（如果尚未尝试）：

1）使用括号（对所有绑定执行相同操作）：

在模板中（对所有绑定执行相同操作）：

---

谢谢你指出错误。我尝试了这两种建议，但都没有改变任何东西，但我认为您已经了解了异步管道。我不太明白这一点，但我做了更多的测试，我认为这可能是问题所在。我在问题中添加了信息。你能试着改变

article:any={}至
文章：ObservableHere是一个基于您的代码的工作演示：真棒！我模仿了演示（第2步），效果非常好。该问题是由于变量末尾缺少“$”而导致的。我只是为了“article$”才买的。“$”表示什么？我为什么需要它？这很奇怪，因为
$
符号只是常用的语法糖，表示属性是可观察的。
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);
        }

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

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

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

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

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