Angular - 我无法在我的页面上显示数据答案

【问题标题】：Angular - I couldn't show data on my pageAngular - 我无法在我的页面上显示数据
【发布时间】：2020-01-03 00:52:14
【问题描述】：

由于我是 Angular 新手，我无法在我的 component.html 页面上显示数据。我得到了 Observable 但无法在页面上显示它。它显示 ERROR 错误：找不到类型为“Prabu”的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等 Iterables。 控制台报错。请帮忙。提前致谢。

角度：

import { AngularFireDatabase } from '@angular/fire/database';    
export class AppComponent {
    author$;
    constructor(db: AngularFireDatabase) {
        this.author$ = db.object('/authors/1').valueChanges();
        this.author$.subscribe(console.log);
    }
}

HTML：

<ul class="list-group mt-3">
    <li class="list-group-item" *ngFor="let author of author$ | async">{{author}}</li>
</ul>

数据库：

控制台响应：

【问题讨论】：

请添加您的回复的示例。
@nash11 - 我更新了我的问题。它返回一个 Observable。因为我是新手，所以我不知道如何解决。
这没有帮助。我们需要知道 Observable 包含什么。将 console.log(this.author$); 替换为 this.author$.subscribe(console.log); 并显示控制台中的内容。
@nash11 - 我已经更新了我的问题。
为什么您的数据返回一个空对象作为第一个元素？你需要先纠正它。虽然这可以在前端完成，但最好先从后端解决它。

标签： angular firebase firebase-realtime-database

【解决方案1】：

这里的问题是您正在接收一个对象并尝试对其进行迭代。如果要遍历对象中的键值对，首先需要将其转换为数组。您可以使用KeyValuePipe 来执行此操作。

<ul class="list-group mt-3">
    <li class="list-group-item" *ngFor="let author of author$ | async | keyvalue">{{author.key}} - {{author.value}}</li>
</ul>

如果您只想在模板中显示name，您可以像下面这样进行

<div>
    <!-- To display another item in the object, simply replace name with the required key, eg. (author$ | async)?.students -->
    {{(author$ | async)?.name}}
</div>

您的组件现在看起来像这样

import { Observable } from 'rxjs';

export class AppComponent {
    author$: Observable<any>;

    constructor(private db: AngularFireDatabase) { }

    ngOnInit() {
        this.author$ = this.db.object('/authors/1').valueChanges();
    }
}

我已将逻辑移至 ngOnInit 函数，因为这是最佳实践，而不是在 contructor 中执行（来源：docs）。

这是StackBlitz 上的一个工作示例。

注意：KeyValuePipe 仅适用于 Angular 版本 6+

【讨论】：

我使用 6.2.3。它不工作。是来自数据库复杂对象还是什么？我不确定。
请提供您的回复看起来如何的示例
我已经更新了我的问题。它返回一个 Observable。
我添加了一种使用 Angular 删除空值的方法。
更新后的答案也不起作用。我认为在这里你可以更好地理解我的问题。 stackblitz.com/edit/reading-list-frm-database?file=src/app/…

【解决方案2】：

*ngFor 适用于数组而非对象。您得到的是 Prabu 的单个对象。在构造函数中使用下面的行来获取所有作者。

db.object('/authors').valueChanges().subscribe((authors)=>{
 this.author$ = authors.
);

在模板中

<li class="list-group-item" *ngFor="let author of author$ | async">{{author.name}}</li>

【讨论】：

它不工作。它在页面上显示“[object Object]”。
在模板中应该是 {{author.name}} 。检查更新的答案。
我也是这样。现在它在控制台上显示“ ERROR TypeError: Cannot read property 'name' of undefined” 错误。
console.log(this.author$) 在构造函数中的输出是什么。
在构造函数中返回一个 Observable。