Question

我在Firestore no-SQL数据库的“文章”集合中存储了一组“文章”文档。我正在使用angularfire2（^ 5.0.0-rc / 10）和firebase（^ 5.0.4）将这些文章拉入Angular 6（^ 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>

我可以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，也包含完整对象。

Answer 1

2种可以尝试的方法（如果尚未尝试）：

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

async

2）使用<h1>{{ (article)?.game?.title }} Review:</h1>管道解开Observable，更改async方法：

selectArticle

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

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>

this

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

1 个答案: