html - Angular 6/Firestore 对象数据不会以 HTML 显示

Question

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

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

这是来 self 的组件的 Controller 的代码:

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}} 在屏幕上显示了一个完整的对象，但对于任何其他插值或数据绑定(bind)，都没有数据。

谁能告诉我为什么 HTML 认为对象属性是空字符串？

更新:

我刚刚在我的 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);
        }

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

Answer 1

2 你可以尝试的事情(如果你还没有):

1) 使用括号(对所有绑定(bind)执行相同操作):

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

2) 使用 async 管道解包 Observable，更改您的 selectArticle 方法:

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

在模板中(对所有绑定(bind)执行相同的操作):

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

---

旁注:您的代码中也有错字，这一行:

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

不应该使用this

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